@forgeroute/ui 0.4.27 → 0.4.28

package/fesm2022/forgeroute-ui.mjs

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
-import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, NgZone, PLATFORM_ID, Renderer2, TemplateRef, ViewEncapsulation, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
+import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, NgZone, PLATFORM_ID, Renderer2, TemplateRef, ViewEncapsulation, afterEveryRender, afterNextRender, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { HttpClient, HttpErrorResponse, HttpParams } from "@angular/common/http";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { catchError, debounceTime, distinctUntilChanged, skip, switchMap } from "rxjs/operators";
-import { Subject, catchError as catchError$1, debounceTime as debounceTime$1, filter, of, switchMap as switchMap$1, throwError } from "rxjs";
+import { Subject, catchError as catchError$1, debounceTime as debounceTime$1, filter, firstValueFrom, isObservable, of, switchMap as switchMap$1, throwError } from "rxjs";
 import { DOCUMENT, DatePipe, DecimalPipe, Location, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import * as i1 from "@angular/forms";
 import { FormControl, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
@@ -40896,7 +40896,7 @@ const REAL_ESTATE_AND_SHARED_INTEGRATIONS = [
 		key: "google-ads",
 		name: "Google Ads",
 		description: "Sync retargeting audiences and track lead attribution from your Google Ads campaigns.",
-		apps: ["real-estate"],
+		apps: ["marketing"],
 		status: "live",
 		group: "Marketing",
 		iconBg: "#fefce8",
@@ -40937,27 +40937,46 @@ const REAL_ESTATE_AND_SHARED_INTEGRATIONS = [
 		]
 	},
 	{
-		key: "facebook-ads",
-		name: "Facebook / Meta Ads",
-		description: "Track leads from Facebook and Instagram ad campaigns.",
-		apps: ["real-estate"],
-		status: "coming-soon",
+		key: "facebook",
+		name: "Facebook & Meta Ads",
+		description: "Publish to your Facebook Page and capture Lead Ad leads into your pipeline.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
 		iconBg: "#eff6ff",
 		iconColor: "#1877f2",
-		connectLabel: "Connect Meta",
-		connectDesc: "Link your Meta Business account to import leads.",
+		connectLabel: "Connect Facebook",
+		connectDesc: "Sign in with Facebook and choose the Page to post to. The same connection powers Meta Ads tracking and lead capture.",
+		setupSteps: [
+			{
+				title: "Open Marketing and click \"Connect Facebook\"",
+				desc: "You'll be redirected to Facebook. Sign in with the account that manages your business Page."
+			},
+			{
+				title: "Approve Page, ads and lead access",
+				desc: "Facebook asks for permission to post to your Page, read ad performance and receive Lead Ad form submissions."
+			},
+			{
+				title: "Choose your Page",
+				desc: "Back in the CRM, confirm the Page name shown on this card. Open Marketing → Ads to see campaigns."
+			}
+		],
 		howItWorks: [
 			{
-				title: "Connect",
-				desc: "Sign in with your Facebook account and select your ad account."
+				title: "Post and schedule",
+				desc: "Publish listings and updates to your Page from the Marketing calendar."
+			},
+			{
+				title: "Lead Ads become contacts",
+				desc: "Facebook Lead Form submissions automatically create contacts with the source set."
 			},
 			{
-				title: "Lead Forms Synced",
-				desc: "Facebook Lead Form submissions automatically create contacts."
+				title: "Ad performance and attribution",
+				desc: "Campaign spend and leads sync every few hours so you can see which campaigns drive deals."
 			},
 			{
-				title: "Attribution",
-				desc: "Track which campaigns drive the most deals and revenue."
+				title: "Conversions and audiences",
+				desc: "Send conversions and custom audiences back to Meta from the CRM."
 			}
 		]
 	},
@@ -41344,7 +41363,7 @@ const REAL_ESTATE_AND_SHARED_INTEGRATIONS = [
 		key: "mailchimp",
 		name: "Mailchimp",
 		description: "Email marketing campaigns, drip sequences, and newsletters.",
-		apps: ["real-estate"],
+		apps: ["marketing"],
 		status: "coming-soon",
 		iconBg: "#fefce8",
 		iconColor: "#ca8a04",
@@ -41356,7 +41375,7 @@ const REAL_ESTATE_AND_SHARED_INTEGRATIONS = [
 		key: "canva",
 		name: "Canva",
 		description: "Design listing flyers, social posts, and marketing materials.",
-		apps: ["real-estate"],
+		apps: ["marketing"],
 		status: "coming-soon",
 		iconBg: "#eff6ff",
 		iconColor: "#2563eb",
@@ -41368,7 +41387,7 @@ const REAL_ESTATE_AND_SHARED_INTEGRATIONS = [
 		key: "bombbomb",
 		name: "BombBomb",
 		description: "Video email marketing to stand out in client inboxes.",
-		apps: ["real-estate"],
+		apps: ["marketing"],
 		status: "coming-soon",
 		iconBg: "#fef2f2",
 		iconColor: "#e53e3e",
@@ -41379,50 +41398,166 @@ const REAL_ESTATE_AND_SHARED_INTEGRATIONS = [
 	{
 		key: "instagram",
 		name: "Instagram",
-		description: "Post listings and track engagement from your Instagram business account.",
-		apps: ["real-estate"],
-		status: "coming-soon",
+		description: "Post listings to your Instagram business account and sync lead-form leads.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
 		iconBg: "#fff1f2",
 		iconColor: "#e11d48",
-		connectLabel: "Coming Soon",
-		connectDesc: "",
-		howItWorks: []
+		connectLabel: "Connect Instagram",
+		connectDesc: "Needs an Instagram Business or Creator account linked to a Facebook Page.",
+		setupSteps: [
+			{
+				title: "Switch to a Business or Creator account",
+				desc: "In the Instagram app: Settings → Account type and tools → Switch to professional account."
+			},
+			{
+				title: "Click \"Connect Instagram\" on Marketing",
+				desc: "You'll be redirected to Meta to sign in and approve publishing access."
+			},
+			{
+				title: "Confirm the account name",
+				desc: "Back in the CRM, the connected handle shows on this card."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Post and schedule",
+				desc: "Posts and reels publish from the Marketing calendar."
+			},
+			{
+				title: "Engagement analytics",
+				desc: "Likes, comments and reach are pulled into Marketing analytics."
+			},
+			{
+				title: "Lead sync",
+				desc: "Instagram lead-form leads become contacts every few hours."
+			},
+			{
+				title: "Reconnect prompts",
+				desc: "If the access token expires you'll be asked to reconnect."
+			}
+		]
 	},
 	{
 		key: "linkedin",
 		name: "LinkedIn",
-		description: "Import professional connections and share listings to your network.",
-		apps: ["real-estate"],
-		status: "coming-soon",
+		description: "Share listings and market updates to LinkedIn and import Lead Gen form leads.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
 		iconBg: "#eff6ff",
 		iconColor: "#0a66c2",
-		connectLabel: "Coming Soon",
-		connectDesc: "",
-		howItWorks: []
+		connectLabel: "Connect LinkedIn",
+		connectDesc: "Posts as your personal profile.",
+		setupSteps: [
+			{
+				title: "Click \"Connect LinkedIn\" on Marketing",
+				desc: "You'll be redirected to LinkedIn to sign in."
+			},
+			{
+				title: "Approve sharing and lead-gen access",
+				desc: "LinkedIn asks permission to post for you and to read Lead Gen form responses."
+			},
+			{
+				title: "Set up Lead Gen forms",
+				desc: "Create Lead Gen forms in LinkedIn Campaign Manager; responses flow into the CRM."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Share to your network",
+				desc: "Posts publish to your profile from the Marketing calendar."
+			},
+			{
+				title: "Lead Gen form leads",
+				desc: "Responses are checked every 15 minutes and become contacts."
+			},
+			{
+				title: "Reconnect when needed",
+				desc: "LinkedIn access lasts about 60 days; you'll be asked to reconnect."
+			}
+		]
 	},
 	{
-		key: "tiktok-ads",
-		name: "TikTok Lead Generation",
-		description: "Import leads from TikTok Lead Generation ads directly into your pipeline.",
-		apps: ["real-estate"],
-		status: "coming-soon",
-		iconBg: "#f0fdf4",
+		key: "tiktok",
+		name: "TikTok",
+		description: "Publish videos to TikTok and capture TikTok Lead Generation leads.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
+		iconBg: "#f1f5f9",
 		iconColor: "#010101",
-		connectLabel: "Coming Soon",
-		connectDesc: "",
-		howItWorks: []
+		connectLabel: "Connect TikTok",
+		connectDesc: "Connect your TikTok account first; lead capture uses the advertiser id from this connection.",
+		setupSteps: [
+			{
+				title: "Click \"Connect TikTok\" on Marketing",
+				desc: "You'll be redirected to TikTok to sign in and approve access."
+			},
+			{
+				title: "Copy the lead webhook URL",
+				desc: "Use the webhook URL for TikTok leads (shown on Marketing → Lead Sync)."
+			},
+			{
+				title: "Add it in TikTok Ads Manager",
+				desc: "Paste the URL into your Lead Generation form settings and submit a test lead."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Publish videos",
+				desc: "Listing videos publish to TikTok from the Marketing calendar."
+			},
+			{
+				title: "Leads become contacts",
+				desc: "Each Lead Generation submission is matched to your company by advertiser id and becomes a contact with source TikTok."
+			},
+			{
+				title: "Secure delivery",
+				desc: "Lead requests are signature-checked before they are accepted."
+			}
+		]
 	},
 	{
 		key: "youtube",
 		name: "YouTube",
-		description: "Upload property tour videos and track views from your channel.",
-		apps: ["real-estate"],
-		status: "coming-soon",
+		description: "Upload property tour videos to your YouTube channel.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
 		iconBg: "#fef2f2",
 		iconColor: "#dc2626",
-		connectLabel: "Coming Soon",
-		connectDesc: "",
-		howItWorks: []
+		connectLabel: "Connect YouTube",
+		connectDesc: "Grants upload and read access to your channel.",
+		setupSteps: [
+			{
+				title: "Click \"Connect YouTube\" on Marketing",
+				desc: "You'll be redirected to Google to sign in."
+			},
+			{
+				title: "Choose the channel",
+				desc: "Pick the YouTube channel the videos should go to."
+			},
+			{
+				title: "Approve upload access",
+				desc: "Grant permission to upload videos and read basic channel stats."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Upload from the CRM",
+				desc: "Videos are uploaded from the Marketing calendar with the title and description of the post."
+			},
+			{
+				title: "Stats read back",
+				desc: "View counts flow into Marketing analytics."
+			},
+			{
+				title: "Disconnect any time",
+				desc: "Disconnecting revokes the CRM's access to your channel."
+			}
+		]
 	},
 	{
 		key: "loom",
@@ -41460,6 +41595,206 @@ const REAL_ESTATE_AND_SHARED_INTEGRATIONS = [
 		connectDesc: "",
 		howItWorks: []
 	},
+	{
+		key: "google-business",
+		name: "Google Business Profile",
+		description: "Post updates and offers to your Google Business Profile.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
+		iconBg: "#eff6ff",
+		iconColor: "#4285f4",
+		connectLabel: "Connect Google Business",
+		connectDesc: "Use the Google account that manages your business listing.",
+		setupSteps: [
+			{
+				title: "Click \"Connect Google Business\" on Marketing",
+				desc: "You'll be redirected to Google to sign in."
+			},
+			{
+				title: "Choose the account that owns your listing",
+				desc: "Pick the location you want to post to."
+			},
+			{
+				title: "Approve access",
+				desc: "Grant permission to manage posts on your business profile."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Posts on your listing",
+				desc: "Updates appear on your Google profile and Maps listing."
+			},
+			{
+				title: "Scheduled posts",
+				desc: "Scheduled posts publish automatically."
+			},
+			{
+				title: "Token health",
+				desc: "The card shows when a reconnect is needed."
+			}
+		]
+	},
+	{
+		key: "pinterest",
+		name: "Pinterest",
+		description: "Pin listing photos to your Pinterest boards.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
+		iconBg: "#fef2f2",
+		iconColor: "#e60023",
+		connectLabel: "Connect Pinterest",
+		connectDesc: "Sign in with Pinterest and pick the board to pin to.",
+		setupSteps: [
+			{
+				title: "Click \"Connect Pinterest\" on Marketing",
+				desc: "You'll be redirected to Pinterest to sign in."
+			},
+			{
+				title: "Approve pin access",
+				desc: "Grant permission to create pins on your boards."
+			},
+			{
+				title: "Choose a board",
+				desc: "Pick the board listing photos should go to."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Pin listings",
+				desc: "Listing photos are pinned from the Marketing calendar."
+			},
+			{
+				title: "Scheduled pins",
+				desc: "Scheduled pins publish automatically."
+			},
+			{
+				title: "Disconnect any time",
+				desc: "Disconnecting revokes access."
+			}
+		]
+	},
+	{
+		key: "x",
+		name: "X (Twitter)",
+		description: "Post listing updates and links to X.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
+		iconBg: "#f1f5f9",
+		iconColor: "#000000",
+		connectLabel: "Connect X",
+		connectDesc: "Sign in with X to post on your behalf.",
+		setupSteps: [
+			{
+				title: "Click \"Connect X\" on Marketing",
+				desc: "You'll be redirected to X to sign in."
+			},
+			{
+				title: "Approve posting access",
+				desc: "Grant permission to post on your behalf."
+			},
+			{
+				title: "Write your first post",
+				desc: "Compose a post on Marketing and pick X."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Post listing updates",
+				desc: "Posts and links publish from the Marketing calendar."
+			},
+			{
+				title: "Scheduled posts",
+				desc: "Scheduled posts publish automatically."
+			},
+			{
+				title: "Disconnect any time",
+				desc: "Disconnecting revokes access."
+			}
+		]
+	},
+	{
+		key: "nextdoor",
+		name: "Nextdoor",
+		description: "Share posts to your Nextdoor neighborhoods.",
+		apps: ["marketing"],
+		status: "live",
+		group: "Social Media",
+		iconBg: "#f0fdf4",
+		iconColor: "#8ed500",
+		connectLabel: "Connect Nextdoor",
+		connectDesc: "Sign in with Nextdoor and choose the neighborhoods to post to.",
+		setupSteps: [
+			{
+				title: "Click \"Connect Nextdoor\" on Marketing",
+				desc: "You'll be redirected to Nextdoor to sign in."
+			},
+			{
+				title: "Approve posting access",
+				desc: "Grant permission to post on your behalf."
+			},
+			{
+				title: "Choose neighborhoods",
+				desc: "Pick the neighborhoods your posts should reach."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Neighborhood posts",
+				desc: "Posts publish to the neighborhoods you chose."
+			},
+			{
+				title: "Scheduled posts",
+				desc: "Scheduled posts publish automatically."
+			},
+			{
+				title: "Disconnect any time",
+				desc: "Disconnecting revokes access."
+			}
+		]
+	},
+	{
+		key: "postgrid",
+		name: "Direct Mail (PostGrid)",
+		description: "Mail postcards, letters and EDDM to your sphere and farm areas.",
+		apps: ["real-estate"],
+		status: "live",
+		group: "Direct Mail",
+		iconBg: "#fff7ed",
+		iconColor: "#ea580c",
+		connectLabel: "Open Direct Mail",
+		connectDesc: "Included with your plan: there is nothing to connect. Printing and mailing run through our PostGrid account.",
+		setupSteps: [
+			{
+				title: "Open Direct Mail",
+				desc: "Go to Marketing → Direct Mail."
+			},
+			{
+				title: "Pick a template and an audience",
+				desc: "Choose a postcard or letter template and the contacts or farm area to mail."
+			},
+			{
+				title: "Add your return address and send",
+				desc: "Confirm your return address, then send or schedule the campaign."
+			}
+		],
+		howItWorks: [
+			{
+				title: "Printed and mailed for you",
+				desc: "Pieces are printed and mailed by PostGrid; there is no account of your own to set up."
+			},
+			{
+				title: "Delivery tracking",
+				desc: "Delivery status updates in the CRM as pieces move through the mail."
+			},
+			{
+				title: "Billed per piece",
+				desc: "Costs follow the number of pieces mailed."
+			}
+		]
+	},
 	{
 		key: "microsoft-teams",
 		name: "Microsoft Teams",
@@ -41646,17 +41981,22 @@ const IDX_BEHAVIOR_SIGNALS = [
 const INTEGRATION_GROUP_ORDER = [
 	"IDX Website",
 	"Email",
+	"Direct Mail",
 	"Text Messaging",
 	"Calendar",
 	"Real Estate Data",
 	"Financials",
 	"Marketing",
+	"Social Media",
 	"Documents & Signing",
 	"Automation & Tools"
 ];
 function integrationsForApp(app) {
 	return INTEGRATION_CATALOG.filter((i) => i.apps === "all" || i.apps.includes(app));
 }
+function integrationsOnlyFor(app) {
+	return INTEGRATION_CATALOG.filter((i) => i.apps !== "all" && i.apps.includes(app));
+}
 function integrationPlainText(html) {
 	const strong = [];
 	return {
@@ -41667,6 +42007,3893 @@ function integrationPlainText(html) {
 		strong
 	};
 }
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IDX_BEHAVIOR_SIGNALS, INTEGRATION_CATALOG, INTEGRATION_FIELD_DEFS, INTEGRATION_GROUP_ORDER, INTEGRATION_OPTION_DEFS, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, NOTES_MAX_LENGTH, NotesComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, buildDefaultSchedule, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatAddress, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, integrationPlainText, integrationsForApp, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
+const str = (v) => typeof v === "string" ? v : "";
+const SETUP_INTEGRATIONS = {
+	quickbooks: {
+		key: "quickbooks",
+		title: "QuickBooks Online",
+		icon: "bank",
+		description: "Sync commissions and expenses to your QuickBooks books.",
+		statusEndpoint: "/quickbooks/status",
+		connectedDetail: (s) => str(s["companyName"]) ? `Connected — ${str(s["companyName"])}` : "Connected",
+		connect: {
+			type: "oauth",
+			authorizeEndpoint: "/quickbooks/authorize"
+		}
+	},
+	slack: {
+		key: "slack",
+		title: "Slack",
+		icon: "message",
+		description: "Get new-lead and deal alerts in a Slack channel.",
+		statusEndpoint: "/slack/status",
+		connectedDetail: (s) => str(s["teamName"]) ? `Connected — ${str(s["teamName"])}${str(s["channelName"]) ? " #" + str(s["channelName"]) : ""}` : "Connected",
+		connect: {
+			type: "oauth",
+			authorizeEndpoint: "/slack/authorize"
+		}
+	},
+	twilio: {
+		key: "twilio",
+		title: "Twilio (calls & texts)",
+		icon: "call",
+		description: "Get a business phone number for texting and calling clients.",
+		statusEndpoint: "/integrations/twilio/status",
+		connectedDetail: (s) => str(s["phoneNumber"]) ? `Connected — ${str(s["phoneNumber"])}` : "Connected",
+		connect: {
+			type: "area-code",
+			connectEndpoint: "/integrations/twilio/connect"
+		}
+	},
+	gmail: {
+		key: "gmail",
+		title: "Gmail / Google Workspace",
+		icon: "email",
+		description: "Connect your Google account for two-way email sync.",
+		statusEndpoint: "/email-sync/status",
+		statusKey: "gmail",
+		connectedDetail: (s) => `Connected — ${str(s["connectedEmail"])}`,
+		connect: {
+			type: "oauth",
+			authorizeEndpoint: "/email-sync/authorize/gmail"
+		}
+	},
+	outlook: {
+		key: "outlook",
+		title: "Outlook / Microsoft 365",
+		icon: "email",
+		description: "Connect your Microsoft account for two-way email sync.",
+		statusEndpoint: "/email-sync/status",
+		statusKey: "outlook",
+		connectedDetail: (s) => `Connected — ${str(s["connectedEmail"])}`,
+		connect: {
+			type: "oauth",
+			authorizeEndpoint: "/email-sync/authorize/outlook"
+		}
+	},
+	"google-calendar": {
+		key: "google-calendar",
+		title: "Google Calendar",
+		icon: "link",
+		description: "Two-way sync with your Google Calendar.",
+		statusEndpoint: "/calendar-sync/status",
+		statusKey: "google",
+		connectedDetail: (s) => `Connected — ${str(s["calendarEmail"])}`,
+		connect: {
+			type: "oauth",
+			authorizeEndpoint: "/calendar-sync/authorize/google"
+		}
+	},
+	"outlook-calendar": {
+		key: "outlook-calendar",
+		title: "Outlook Calendar",
+		icon: "link",
+		description: "Two-way sync with your Outlook / Microsoft 365 calendar.",
+		statusEndpoint: "/calendar-sync/status",
+		statusKey: "outlook",
+		connectedDetail: (s) => `Connected — ${str(s["calendarEmail"])}`,
+		connect: {
+			type: "oauth",
+			authorizeEndpoint: "/calendar-sync/authorize/outlook"
+		}
+	}
+};
+function setupIntegrations(...keys) {
+	return keys.map((k) => {
+		const found = SETUP_INTEGRATIONS[k];
+		if (!found) throw new Error(`Unknown setup integration "${k}".`);
+		return found;
+	});
+}
+var SetupWizardStepDirective = class SetupWizardStepDirective {
+	constructor() {
+		this.key = input.required({
+			...ngDevMode ? { debugName: "key" } : /* istanbul ignore next */ {},
+			alias: "uiSetupStep"
+		});
+		this.template = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SetupWizardStepDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: SetupWizardStepDirective,
+			isStandalone: true,
+			selector: "ng-template[uiSetupStep]",
+			inputs: { key: {
+				classPropertyName: "key",
+				publicName: "uiSetupStep",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			} },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SetupWizardStepDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[uiSetupStep]",
+			standalone: true
+		}]
+	}],
+	propDecorators: { key: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiSetupStep",
+			required: true
+		}]
+	}] }
+});
+const DEFAULT_TEXTS = {
+	brand: "Setup Wizard",
+	stepperLabel: "Setup steps",
+	progress: (done, total) => `${done} of ${total} complete`,
+	back: "Back",
+	skip: "Skip for now",
+	saveAndContinue: "Save & Continue",
+	continue: "Continue",
+	exit: "Exit Setup",
+	connect: "Connect",
+	reconnect: "Reconnect",
+	connected: "Connected",
+	importMore: "Import more",
+	whatGetsImported: "WHAT GETS IMPORTED:",
+	doneTitle: "You're All Set!",
+	doneDescription: "Your account is configured and ready to go. Here's a quick summary:",
+	doneHint: "You can always update these settings later from the Settings menu.",
+	finish: "Go to Dashboard",
+	summaryDone: "Done",
+	summarySkipped: "Skipped",
+	summaryPending: "Pending",
+	areaCode: "Area code",
+	connectIntegrationFailed: (title) => `Failed to connect ${title}. Please try again from the Integrations page after setup.`
+};
+const SETUP_DONE_KEY = "done";
+var SetupWizardComponent = class SetupWizardComponent {
+	constructor() {
+		this.http = inject(HttpClient);
+		this.apiBase = inject(FORGEROUTE_CONFIG, { optional: true })?.baseUrl ?? "/api";
+		this.destroyRef = inject(DestroyRef);
+		this.steps = input.required(...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+		this.texts = input({}, ...ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []);
+		this.finished = output();
+		this.exited = output();
+		this.stepChange = output();
+		this.stepTemplates = contentChildren(SetupWizardStepDirective, ...ngDevMode ? [{ debugName: "stepTemplates" }] : /* istanbul ignore next */ []);
+		this.importers = viewChildren("importer", ...ngDevMode ? [{ debugName: "importers" }] : /* istanbul ignore next */ []);
+		this.t = computed(() => ({
+			...DEFAULT_TEXTS,
+			...this.texts()
+		}), ...ngDevMode ? [{ debugName: "t" }] : /* istanbul ignore next */ []);
+		this.currentKey = signal("", ...ngDevMode ? [{ debugName: "currentKey" }] : /* istanbul ignore next */ []);
+		this.completed = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []);
+		this.skipped = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "skipped" }] : /* istanbul ignore next */ []);
+		this.imports = signal({}, ...ngDevMode ? [{ debugName: "imports" }] : /* istanbul ignore next */ []);
+		this.statuses = signal({}, ...ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []);
+		this.busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+		this.error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.areaCodeOpen = signal("", ...ngDevMode ? [{ debugName: "areaCodeOpen" }] : /* istanbul ignore next */ []);
+		this.areaCode = signal("", ...ngDevMode ? [{ debugName: "areaCode" }] : /* istanbul ignore next */ []);
+		this.validAreaCode = computed(() => /^\d{3}$/.test(this.areaCode().trim()), ...ngDevMode ? [{ debugName: "validAreaCode" }] : /* istanbul ignore next */ []);
+		this.allSteps = computed(() => [...this.steps(), {
+			key: SETUP_DONE_KEY,
+			label: this.t().doneTitle,
+			kind: "custom",
+			skippable: false
+		}], ...ngDevMode ? [{ debugName: "allSteps" }] : /* istanbul ignore next */ []);
+		this.index = computed(() => Math.max(0, this.allSteps().findIndex((s) => s.key === this.currentKey())), ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+		this.current = computed(() => this.allSteps()[this.index()], ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+		this.isDone = computed(() => this.current().key === SETUP_DONE_KEY, ...ngDevMode ? [{ debugName: "isDone" }] : /* istanbul ignore next */ []);
+		this.completedCount = computed(() => this.allSteps().filter((s) => this.completed().has(s.key) || this.skipped().has(s.key)).length, ...ngDevMode ? [{ debugName: "completedCount" }] : /* istanbul ignore next */ []);
+		this.stepperSteps = computed(() => this.allSteps().map((s) => ({
+			key: s.key,
+			label: s.label,
+			complete: this.completed().has(s.key),
+			disabled: this.busy()
+		})), ...ngDevMode ? [{ debugName: "stepperSteps" }] : /* istanbul ignore next */ []);
+		this.summarySections = computed(() => [{ items: this.steps().map((s) => ({
+			label: s.label,
+			badge: this.completed().has(s.key) ? {
+				label: this.t().summaryDone,
+				variant: "green"
+			} : this.skipped().has(s.key) ? {
+				label: this.t().summarySkipped,
+				variant: "gray"
+			} : {
+				label: this.t().summaryPending,
+				variant: "slate"
+			}
+		})) }], ...ngDevMode ? [{ debugName: "summarySections" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const steps = this.allSteps();
+			untracked(() => {
+				if (!steps.some((s) => s.key === this.currentKey())) this.enter(steps[0].key);
+			});
+		});
+	}
+	templateFor(key) {
+		return this.stepTemplates().find((d) => d.key() === key)?.template ?? null;
+	}
+	goTo(key) {
+		if (!this.busy() && this.allSteps().some((s) => s.key === key)) this.enter(key);
+	}
+	enter(key) {
+		this.error.set("");
+		this.areaCodeOpen.set("");
+		this.areaCode.set("");
+		this.currentKey.set(key);
+		const step = this.allSteps().find((s) => s.key === key);
+		if (step.kind === "integrations") this.loadStatuses(step.integrations ?? []);
+		step.onEnter?.();
+		this.stepChange.emit(key);
+	}
+	advanceFrom(key) {
+		const steps = this.allSteps();
+		const next = steps[steps.findIndex((s) => s.key === key) + 1];
+		if (next) this.enter(next.key);
+	}
+	back() {
+		if (this.busy()) return;
+		const prev = this.allSteps()[this.index() - 1];
+		if (prev) this.enter(prev.key);
+	}
+	skip() {
+		if (this.busy()) return;
+		const key = this.current().key;
+		this.skipped.update((s) => new Set(s).add(key));
+		this.advanceFrom(key);
+	}
+	markCompleted(key) {
+		this.completed.update((s) => new Set(s).add(key));
+		this.skipped.update((s) => {
+			const n = new Set(s);
+			n.delete(key);
+			return n;
+		});
+	}
+	async saveAndContinue() {
+		if (this.busy()) return;
+		const step = this.current();
+		this.busy.set(true);
+		this.error.set("");
+		try {
+			await this.run(step.kind === "custom" ? step.save?.() : step.onContinue?.());
+			this.markCompleted(step.key);
+			this.advanceFrom(step.key);
+		} catch (e) {
+			this.error.set(this.messageOf(e, "Failed to save. Please try again."));
+		} finally {
+			this.busy.set(false);
+		}
+	}
+	async run(result) {
+		if (isObservable(result)) await firstValueFrom(result, { defaultValue: void 0 });
+		else await result;
+	}
+	messageOf(e, fallback) {
+		const text = e instanceof HttpErrorResponse ? e.error?.message : e?.error?.message ?? e?.message;
+		return typeof text === "string" && text ? text : fallback;
+	}
+	openImport(key) {
+		if (this.steps().findIndex((s) => s.key === key) < 0) return;
+		this.importers()[0]?.openImport();
+	}
+	onImported(key) {
+		const imported = this.importers()[0]?.importResult?.imported ?? 0;
+		this.imports.update((m) => ({
+			...m,
+			[key]: imported
+		}));
+		this.markCompleted(key);
+	}
+	importResult(key) {
+		const n = this.imports()[key];
+		return n === void 0 ? null : n;
+	}
+	clearImport(key) {
+		this.imports.update((m) => {
+			const n = { ...m };
+			delete n[key];
+			return n;
+		});
+	}
+	importTitle(key) {
+		const imp = this.steps().find((s) => s.key === key)?.import;
+		const n = this.imports()[key] ?? 0;
+		return imp?.resultTitle ? imp.resultTitle(n) : `${n} ${(imp?.config.entityNamePlural ?? "records").toLowerCase()} imported successfully.`;
+	}
+	continueFromImport() {
+		this.advanceFrom(this.current().key);
+	}
+	loadStatuses(list) {
+		for (const url of new Set(list.map((i) => i.statusEndpoint))) this.http.get(this.apiBase + url).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (body) => this.setStatuses(list.filter((i) => i.statusEndpoint === url), body ?? {}),
+			error: () => this.setStatuses(list.filter((i) => i.statusEndpoint === url), {})
+		});
+	}
+	setStatuses(list, body) {
+		this.statuses.update((cur) => {
+			const next = { ...cur };
+			for (const i of list) next[i.key] = (i.statusKey ? body[i.statusKey] : body) ?? { connected: false };
+			return next;
+		});
+	}
+	isConnected(i) {
+		return !!this.statuses()[i.key]?.connected;
+	}
+	detailFor(i) {
+		const st = this.statuses()[i.key];
+		return st?.connected ? i.connectedDetail ? i.connectedDetail(st) : this.t().connected : i.description;
+	}
+	connect(i) {
+		if (this.busy()) return;
+		this.error.set("");
+		this.areaCodeOpen.set("");
+		this.areaCode.set("");
+		if (i.connect.type === "area-code") {
+			this.areaCodeOpen.set(i.key);
+			return;
+		}
+		this.http.get(this.apiBase + i.connect.authorizeEndpoint).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (res) => {
+				if (res?.url) this.redirect(res.url);
+			},
+			error: () => this.error.set(this.t().connectIntegrationFailed(i.title))
+		});
+	}
+	areaCodeLabelFor(i) {
+		return (i.connect.type === "area-code" ? i.connect.areaCodeLabel : void 0) ?? this.t().areaCode;
+	}
+	redirect(url) {
+		window.location.href = url;
+	}
+	submitAreaCode(i) {
+		if (i.connect.type !== "area-code" || this.busy() || !this.validAreaCode()) return;
+		const connectEndpoint = i.connect.connectEndpoint;
+		this.busy.set(true);
+		this.error.set("");
+		this.http.post(this.apiBase + connectEndpoint, { areaCode: this.areaCode().trim() }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: () => {
+				this.busy.set(false);
+				this.areaCodeOpen.set("");
+				this.areaCode.set("");
+				this.loadStatuses([i]);
+			},
+			error: (e) => {
+				this.busy.set(false);
+				this.error.set(this.messageOf(e, this.t().connectIntegrationFailed(i.title)));
+			}
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SetupWizardComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: SetupWizardComponent,
+			isStandalone: true,
+			selector: "ui-setup-wizard",
+			inputs: {
+				steps: {
+					classPropertyName: "steps",
+					publicName: "steps",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				texts: {
+					classPropertyName: "texts",
+					publicName: "texts",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				finished: "finished",
+				exited: "exited",
+				stepChange: "stepChange"
+			},
+			queries: [{
+				propertyName: "stepTemplates",
+				predicate: SetupWizardStepDirective,
+				isSignal: true
+			}],
+			viewQueries: [{
+				propertyName: "importers",
+				predicate: ["importer"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div class="sw-page" data-testid="setup-wizard-page">
+      <aside class="sw-sidebar">
+        <div class="sw-sidebar-top">
+          <div class="sw-brand">
+            <ng-content select="[setup-wizard-logo]" />
+            <span class="sw-brand-text" data-testid="setup-wizard-brand">{{ t().brand }}</span>
+          </div>
+          <ui-stepper class="sw-step-nav" [ariaLabel]="t().stepperLabel" orientation="vertical" size="sm" compact="md"
+            [steps]="stepperSteps()" [current]="currentKey()" [clickable]="true" [linear]="false" (stepClick)="goTo($event)" />
+        </div>
+        <div class="sw-sidebar-bottom">
+          <ui-progress-bar [value]="completedCount()" [max]="allSteps().length" ariaLabel="Setup progress" />
+          <span class="sw-progress-text" data-testid="wizard-progress-text">{{ t().progress(completedCount(), allSteps().length) }}</span>
+        </div>
+      </aside>
+
+      <main class="sw-content">
+        <div class="sw-content-header">
+          <h1 class="sw-step-title" data-testid="wizard-step-title">{{ current().label }}</h1>
+          <ui-button variant="ghost" size="sm" data-testid="wizard-exit" (click)="exited.emit()">{{ t().exit }}</ui-button>
+        </div>
+
+        @if (isDone()) {
+          <div class="sw-step-content sw-done" data-testid="wizard-done">
+            <p class="sw-step-desc">{{ t().doneDescription }}</p>
+            <ui-panel-info-list class="sw-summary" data-testid="wizard-summary" [sections]="summarySections()" />
+            <p class="sw-done-hint">{{ t().doneHint }}</p>
+            <ui-button variant="primary" size="lg" data-testid="wizard-finish" (click)="finished.emit()">{{ t().finish }}</ui-button>
+          </div>
+        } @else {
+          <div class="sw-step-content" [attr.data-step]="current().key">
+            @if (current().description) { <p class="sw-step-desc">{{ current().description }}</p> }
+
+            @switch (current().kind) {
+              @case ('custom') {
+                @if (templateFor(current().key); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> }
+              }
+              @case ('import') {
+                @if (current().import; as imp) {
+                  @if (imp.tags?.length) {
+                    <div class="sw-import-tags" role="group" [attr.aria-label]="t().whatGetsImported">
+                      <span class="sw-tag">{{ t().whatGetsImported }}</span>
+                      @for (tag of imp.tags; track tag) { <ui-badge [label]="tag" variant="slate" /> }
+                    </div>
+                  }
+                  @if (importResult(current().key); as res) {
+                    <ui-alert variant="success" [title]="importTitle(current().key)" [attr.data-testid]="'import-result-' + current().key">
+                      {{ imp.resultText }}
+                      <ui-button variant="link" size="sm" data-testid="import-more" (click)="clearImport(current().key)">{{ t().importMore }}</ui-button>
+                    </ui-alert>
+                  } @else {
+                    @if (imp.hint) { <p class="sw-hint">{{ imp.hint }}</p> }
+                    <ui-button variant="primary" size="lg" [attr.data-testid]="'open-import-' + current().key" (click)="openImport(current().key)">{{ imp.buttonLabel }}</ui-button>
+                  }
+                  <ui-import-export #importer style="display:none" [config]="imp.config" [importSources]="imp.sources" (imported)="onImported(current().key)" />
+                }
+              }
+              @case ('integrations') {
+                <div class="sw-provider-grid" role="group" [attr.aria-label]="current().label">
+                  @for (it of current().integrations ?? []; track it.key) {
+                    <ui-list-item [attr.data-testid]="'integration-' + it.key" [interactive]="false" [bordered]="true"
+                      [icon]="it.icon ?? 'link'" iconColor="blue" [title]="it.title" [details]="[detailFor(it)]"
+                      [badge]="t().connected" badgeVariant="green" [alwaysShowBadge]="isConnected(it)">
+                      <ui-button list-item-action variant="secondary" size="sm" [ariaLabel]="(isConnected(it) ? t().reconnect : t().connect) + ' ' + it.title" (click)="connect(it)">
+                        {{ isConnected(it) ? t().reconnect : t().connect }}
+                      </ui-button>
+                    </ui-list-item>
+                    @if (areaCodeOpen() === it.key) {
+                      <div class="sw-area-code" [attr.data-testid]="'area-code-' + it.key">
+                        <ui-text-input [label]="areaCodeLabelFor(it)" [maxlength]="3" inputmode="numeric" [ngModel]="areaCode()" (ngModelChange)="areaCode.set($event ?? '')" [inputTestId]="'area-code-input-' + it.key" />
+                        <ui-button variant="primary" size="sm" [loading]="busy()" [disabled]="!validAreaCode()" (click)="submitAreaCode(it)">{{ t().connect }}</ui-button>
+                      </div>
+                    }
+                  }
+                </div>
+              }
+            }
+
+            @if (error()) { <ui-alert variant="danger" data-testid="wizard-save-error">{{ error() }}</ui-alert> }
+
+            <div class="sw-step-actions">
+              @if (index() > 0) { <ui-button variant="ghost" size="md" data-testid="wizard-back" [disabled]="busy()" (click)="back()">{{ t().back }}</ui-button> } @else { <span></span> }
+              <div class="sw-actions-right">
+                @if (current().skippable !== false) {
+                  <ui-button variant="ghost" size="md" data-testid="wizard-skip" [disabled]="busy()" (click)="skip()">{{ t().skip }}</ui-button>
+                }
+                @if (current().kind === 'custom') {
+                  <ui-button variant="primary" size="lg" data-testid="wizard-save" [loading]="busy()" [disabled]="current().canContinue ? !current().canContinue!() : false" (click)="saveAndContinue()">
+                    {{ current().saveLabel ?? t().saveAndContinue }}
+                  </ui-button>
+                } @else if (current().kind === 'integrations') {
+                  <ui-button variant="primary" size="lg" data-testid="wizard-save" [loading]="busy()" (click)="saveAndContinue()">{{ t().saveAndContinue }}</ui-button>
+                } @else if (importResult(current().key)) {
+                  <ui-button variant="primary" size="lg" data-testid="wizard-continue" (click)="continueFromImport()">{{ t().continue }}</ui-button>
+                }
+              </div>
+            </div>
+          </div>
+        }
+      </main>
+    </div>
+  `,
+			isInline: true,
+			styles: [".sw-page{display:flex;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sw-sidebar{width:260px;min-width:260px;background:#faf9f7;border-right:1px solid #e5e2dc;display:flex;flex-direction:column;justify-content:space-between;padding:28px 20px}.sw-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}.sw-brand-text{font-size:1.125rem;font-weight:700;color:#1e293b}.sw-step-nav{display:block}.sw-sidebar-bottom{margin-top:24px}.sw-progress-text{display:block;margin-top:8px;font-size:.75rem;color:#94a3b8}.sw-content{flex:1;min-width:0;background:#fff;display:flex;flex-direction:column;overflow-y:auto}.sw-content-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 32px;border-bottom:1px solid #f1f5f9}.sw-step-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0}.sw-step-content{max-width:780px;padding:16px 48px 60px}.sw-step-desc{font-size:.9375rem;color:#6b7280;line-height:1.5;margin:0 0 32px}.sw-hint{font-size:.8125rem;color:#94a3b8;margin:0 0 16px}.sw-import-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:28px}.sw-tag{font-size:.6875rem;font-weight:700;letter-spacing:1px;color:#6b7280}.sw-provider-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.sw-area-code{display:flex;align-items:flex-end;gap:12px;padding:0 0 8px 4px;max-width:320px}.sw-area-code ui-text-input{flex:1}.sw-content ui-alert{display:block;margin-bottom:16px}.sw-step-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:20px;border-top:1px solid #f1f5f9}.sw-actions-right{display:flex;align-items:center;gap:16px}.sw-done{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:none}.sw-done .sw-step-desc{max-width:480px}.sw-summary{display:block;width:100%;max-width:480px;margin-bottom:24px;text-align:left}.sw-done-hint{font-size:.8125rem;color:#9ca3af;margin-bottom:24px}@media(max-width:768px){.sw-page{flex-direction:column}.sw-sidebar{width:100%;min-width:unset;padding:16px}.sw-brand{margin-bottom:12px}.sw-sidebar-bottom{display:none}.sw-step-content{padding:12px 20px 40px}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.MaxLengthValidator,
+					selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+					inputs: ["maxlength"]
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "component",
+					type: AlertComponent,
+					selector: "ui-alert",
+					inputs: [
+						"variant",
+						"title",
+						"dismissible",
+						"dismissAriaLabel",
+						"quiet",
+						"compact",
+						"inline"
+					],
+					outputs: ["dismissed"]
+				},
+				{
+					kind: "component",
+					type: BadgeComponent,
+					selector: "ui-badge",
+					inputs: ["label", "variant"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				},
+				{
+					kind: "component",
+					type: ImportExportComponent,
+					selector: "ui-import-export",
+					inputs: [
+						"config",
+						"importSources",
+						"exportParams",
+						"exportOnly"
+					],
+					outputs: ["imported"]
+				},
+				{
+					kind: "component",
+					type: ListItemComponent,
+					selector: "ui-list-item",
+					inputs: [
+						"leading",
+						"inputName",
+						"inputId",
+						"checked",
+						"highlighted",
+						"bordered",
+						"interactive",
+						"alwaysShowBadge",
+						"wrapText",
+						"title",
+						"badge",
+						"badgeVariant",
+						"details",
+						"icon",
+						"iconColor"
+					],
+					outputs: ["select"]
+				},
+				{
+					kind: "component",
+					type: PanelInfoListComponent,
+					selector: "ui-panel-info-list",
+					inputs: [
+						"sections",
+						"showEmptyState",
+						"labelColon",
+						"fill"
+					]
+				},
+				{
+					kind: "component",
+					type: ProgressBarComponent,
+					selector: "ui-progress-bar",
+					inputs: [
+						"value",
+						"max",
+						"label",
+						"variant",
+						"color",
+						"tooltip",
+						"ariaLabel",
+						"ariaLabelledby",
+						"valueText"
+					]
+				},
+				{
+					kind: "component",
+					type: StepperComponent,
+					selector: "ui-stepper",
+					inputs: [
+						"steps",
+						"current",
+						"orientation",
+						"clickable",
+						"linear",
+						"size",
+						"accentColor",
+						"completeColor",
+						"accentLabels",
+						"ariaLabel",
+						"labelsOnSmallScreens",
+						"labelPosition",
+						"stackBelow",
+						"minStepWidth",
+						"scrollable",
+						"leadingWidth",
+						"compact"
+					],
+					outputs: ["currentChange", "stepClick"]
+				},
+				{
+					kind: "component",
+					type: TextInputComponent,
+					selector: "ui-text-input",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"inputTestId",
+						"placeholder",
+						"prefix",
+						"revealable",
+						"passwordRequirements",
+						"passwordRules",
+						"type",
+						"maxlength",
+						"required",
+						"autocomplete",
+						"inputmode",
+						"readonly",
+						"hint",
+						"error",
+						"phoneFormat",
+						"min",
+						"max",
+						"maxDecimals",
+						"step",
+						"valueType",
+						"formatter",
+						"integer",
+						"showErrors",
+						"disabled"
+					],
+					outputs: [
+						"valueChange",
+						"focused",
+						"blurred",
+						"invalidChange"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SetupWizardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-setup-wizard",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				FormsModule,
+				AlertComponent,
+				BadgeComponent,
+				ButtonComponent,
+				ImportExportComponent,
+				ListItemComponent,
+				PanelInfoListComponent,
+				ProgressBarComponent,
+				StepperComponent,
+				TextInputComponent
+			],
+			template: `
+    <div class="sw-page" data-testid="setup-wizard-page">
+      <aside class="sw-sidebar">
+        <div class="sw-sidebar-top">
+          <div class="sw-brand">
+            <ng-content select="[setup-wizard-logo]" />
+            <span class="sw-brand-text" data-testid="setup-wizard-brand">{{ t().brand }}</span>
+          </div>
+          <ui-stepper class="sw-step-nav" [ariaLabel]="t().stepperLabel" orientation="vertical" size="sm" compact="md"
+            [steps]="stepperSteps()" [current]="currentKey()" [clickable]="true" [linear]="false" (stepClick)="goTo($event)" />
+        </div>
+        <div class="sw-sidebar-bottom">
+          <ui-progress-bar [value]="completedCount()" [max]="allSteps().length" ariaLabel="Setup progress" />
+          <span class="sw-progress-text" data-testid="wizard-progress-text">{{ t().progress(completedCount(), allSteps().length) }}</span>
+        </div>
+      </aside>
+
+      <main class="sw-content">
+        <div class="sw-content-header">
+          <h1 class="sw-step-title" data-testid="wizard-step-title">{{ current().label }}</h1>
+          <ui-button variant="ghost" size="sm" data-testid="wizard-exit" (click)="exited.emit()">{{ t().exit }}</ui-button>
+        </div>
+
+        @if (isDone()) {
+          <div class="sw-step-content sw-done" data-testid="wizard-done">
+            <p class="sw-step-desc">{{ t().doneDescription }}</p>
+            <ui-panel-info-list class="sw-summary" data-testid="wizard-summary" [sections]="summarySections()" />
+            <p class="sw-done-hint">{{ t().doneHint }}</p>
+            <ui-button variant="primary" size="lg" data-testid="wizard-finish" (click)="finished.emit()">{{ t().finish }}</ui-button>
+          </div>
+        } @else {
+          <div class="sw-step-content" [attr.data-step]="current().key">
+            @if (current().description) { <p class="sw-step-desc">{{ current().description }}</p> }
+
+            @switch (current().kind) {
+              @case ('custom') {
+                @if (templateFor(current().key); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> }
+              }
+              @case ('import') {
+                @if (current().import; as imp) {
+                  @if (imp.tags?.length) {
+                    <div class="sw-import-tags" role="group" [attr.aria-label]="t().whatGetsImported">
+                      <span class="sw-tag">{{ t().whatGetsImported }}</span>
+                      @for (tag of imp.tags; track tag) { <ui-badge [label]="tag" variant="slate" /> }
+                    </div>
+                  }
+                  @if (importResult(current().key); as res) {
+                    <ui-alert variant="success" [title]="importTitle(current().key)" [attr.data-testid]="'import-result-' + current().key">
+                      {{ imp.resultText }}
+                      <ui-button variant="link" size="sm" data-testid="import-more" (click)="clearImport(current().key)">{{ t().importMore }}</ui-button>
+                    </ui-alert>
+                  } @else {
+                    @if (imp.hint) { <p class="sw-hint">{{ imp.hint }}</p> }
+                    <ui-button variant="primary" size="lg" [attr.data-testid]="'open-import-' + current().key" (click)="openImport(current().key)">{{ imp.buttonLabel }}</ui-button>
+                  }
+                  <ui-import-export #importer style="display:none" [config]="imp.config" [importSources]="imp.sources" (imported)="onImported(current().key)" />
+                }
+              }
+              @case ('integrations') {
+                <div class="sw-provider-grid" role="group" [attr.aria-label]="current().label">
+                  @for (it of current().integrations ?? []; track it.key) {
+                    <ui-list-item [attr.data-testid]="'integration-' + it.key" [interactive]="false" [bordered]="true"
+                      [icon]="it.icon ?? 'link'" iconColor="blue" [title]="it.title" [details]="[detailFor(it)]"
+                      [badge]="t().connected" badgeVariant="green" [alwaysShowBadge]="isConnected(it)">
+                      <ui-button list-item-action variant="secondary" size="sm" [ariaLabel]="(isConnected(it) ? t().reconnect : t().connect) + ' ' + it.title" (click)="connect(it)">
+                        {{ isConnected(it) ? t().reconnect : t().connect }}
+                      </ui-button>
+                    </ui-list-item>
+                    @if (areaCodeOpen() === it.key) {
+                      <div class="sw-area-code" [attr.data-testid]="'area-code-' + it.key">
+                        <ui-text-input [label]="areaCodeLabelFor(it)" [maxlength]="3" inputmode="numeric" [ngModel]="areaCode()" (ngModelChange)="areaCode.set($event ?? '')" [inputTestId]="'area-code-input-' + it.key" />
+                        <ui-button variant="primary" size="sm" [loading]="busy()" [disabled]="!validAreaCode()" (click)="submitAreaCode(it)">{{ t().connect }}</ui-button>
+                      </div>
+                    }
+                  }
+                </div>
+              }
+            }
+
+            @if (error()) { <ui-alert variant="danger" data-testid="wizard-save-error">{{ error() }}</ui-alert> }
+
+            <div class="sw-step-actions">
+              @if (index() > 0) { <ui-button variant="ghost" size="md" data-testid="wizard-back" [disabled]="busy()" (click)="back()">{{ t().back }}</ui-button> } @else { <span></span> }
+              <div class="sw-actions-right">
+                @if (current().skippable !== false) {
+                  <ui-button variant="ghost" size="md" data-testid="wizard-skip" [disabled]="busy()" (click)="skip()">{{ t().skip }}</ui-button>
+                }
+                @if (current().kind === 'custom') {
+                  <ui-button variant="primary" size="lg" data-testid="wizard-save" [loading]="busy()" [disabled]="current().canContinue ? !current().canContinue!() : false" (click)="saveAndContinue()">
+                    {{ current().saveLabel ?? t().saveAndContinue }}
+                  </ui-button>
+                } @else if (current().kind === 'integrations') {
+                  <ui-button variant="primary" size="lg" data-testid="wizard-save" [loading]="busy()" (click)="saveAndContinue()">{{ t().saveAndContinue }}</ui-button>
+                } @else if (importResult(current().key)) {
+                  <ui-button variant="primary" size="lg" data-testid="wizard-continue" (click)="continueFromImport()">{{ t().continue }}</ui-button>
+                }
+              </div>
+            </div>
+          </div>
+        }
+      </main>
+    </div>
+  `,
+			styles: [".sw-page{display:flex;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.sw-sidebar{width:260px;min-width:260px;background:#faf9f7;border-right:1px solid #e5e2dc;display:flex;flex-direction:column;justify-content:space-between;padding:28px 20px}.sw-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}.sw-brand-text{font-size:1.125rem;font-weight:700;color:#1e293b}.sw-step-nav{display:block}.sw-sidebar-bottom{margin-top:24px}.sw-progress-text{display:block;margin-top:8px;font-size:.75rem;color:#94a3b8}.sw-content{flex:1;min-width:0;background:#fff;display:flex;flex-direction:column;overflow-y:auto}.sw-content-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 32px;border-bottom:1px solid #f1f5f9}.sw-step-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0}.sw-step-content{max-width:780px;padding:16px 48px 60px}.sw-step-desc{font-size:.9375rem;color:#6b7280;line-height:1.5;margin:0 0 32px}.sw-hint{font-size:.8125rem;color:#94a3b8;margin:0 0 16px}.sw-import-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:28px}.sw-tag{font-size:.6875rem;font-weight:700;letter-spacing:1px;color:#6b7280}.sw-provider-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.sw-area-code{display:flex;align-items:flex-end;gap:12px;padding:0 0 8px 4px;max-width:320px}.sw-area-code ui-text-input{flex:1}.sw-content ui-alert{display:block;margin-bottom:16px}.sw-step-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:20px;border-top:1px solid #f1f5f9}.sw-actions-right{display:flex;align-items:center;gap:16px}.sw-done{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:none}.sw-done .sw-step-desc{max-width:480px}.sw-summary{display:block;width:100%;max-width:480px;margin-bottom:24px;text-align:left}.sw-done-hint{font-size:.8125rem;color:#9ca3af;margin-bottom:24px}@media(max-width:768px){.sw-page{flex-direction:column}.sw-sidebar{width:100%;min-width:unset;padding:16px}.sw-brand{margin-bottom:12px}.sw-sidebar-bottom{display:none}.sw-step-content{padding:12px 20px 40px}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		steps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "steps",
+				required: true
+			}]
+		}],
+		texts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "texts",
+				required: false
+			}]
+		}],
+		finished: [{
+			type: i0.Output,
+			args: ["finished"]
+		}],
+		exited: [{
+			type: i0.Output,
+			args: ["exited"]
+		}],
+		stepChange: [{
+			type: i0.Output,
+			args: ["stepChange"]
+		}],
+		stepTemplates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => SetupWizardStepDirective), { isSignal: true }]
+		}],
+		importers: [{
+			type: i0.ViewChildren,
+			args: ["importer", { isSignal: true }]
+		}]
+	}
+});
+const EMAIL_TEMPLATE_START_TEXT = "Start writing your email...";
+const EMAIL_TEMPLATE_MAX_BODY = 9e3;
+const EMAIL_TEMPLATE_MAX_TEXT = 255;
+const MAX_EMAIL_ADDRESS_LENGTH = 254;
+const EMAIL_RE = /^[^\s@,;<>"]+@[^\s@,;<>"]+\.[^\s@,;<>"]+$/;
+const isValidEmailAddress = (address) => address.length <= 254 && EMAIL_RE.test(address);
+function isWebUrl(raw) {
+	if (/[\s"<>]/.test(raw)) return false;
+	try {
+		const u = new URL(raw);
+		return (u.protocol === "http:" || u.protocol === "https:") && (u.hostname.includes(".") || u.hostname === "localhost");
+	} catch {
+		return false;
+	}
+}
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+const CONTENT_MEMO = /* @__PURE__ */ new Map();
+function blockHasContent(html) {
+	const hit = CONTENT_MEMO.get(html);
+	if (hit !== void 0) return hit;
+	const doc = new DOMParser().parseFromString(html, "text/html");
+	let result;
+	if (doc.querySelector("img, video, iframe")) result = true;
+	else {
+		const text = (doc.body.textContent ?? "").replace(/ /g, " ").trim();
+		result = text !== "" && text !== "Start writing your email...";
+	}
+	if (CONTENT_MEMO.size >= 200) CONTENT_MEMO.clear();
+	CONTENT_MEMO.set(html, result);
+	return result;
+}
+const EMAIL_BLOCK_DRAG_TYPE = "application/x-tpl-block";
+function isBlockDrag(event) {
+	const types = event.dataTransfer?.types;
+	return !!types && Array.from(types).includes("application/x-tpl-block");
+}
+function insideEditorBlock(node) {
+	return !!(node instanceof Element ? node : node?.parentElement)?.closest(".block-content");
+}
+function formatVideoDuration(seconds) {
+	if (!seconds) return "";
+	return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
+}
+function formatCategoryLabel(cat) {
+	return (cat ?? "").split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function thumbnailSrc(video, origin) {
+	const t = video.thumbnailUrl;
+	if (!t) return null;
+	return t.startsWith("http") ? t : `${origin}${t}`;
+}
+function buildVideoBlockHtml(video, link, caption, origin) {
+	const title = escapeHtml(video.title);
+	const href = escapeHtml(link);
+	const thumb = thumbnailSrc(video, origin);
+	return `<div style="max-width:560px;margin:16px auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;font-family:inherit"><a href="${href}" target="_blank" style="display:block;text-decoration:none;">${`<div style="position:relative;display:block;line-height:0;">${thumb ? `<img src="${escapeHtml(thumb)}" alt="${title}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:0;"/>` : `<div style="width:100%;height:200px;background:linear-gradient(135deg,#1e293b,#334155);display:flex;align-items:center;justify-content:center;"></div>`}<div style="position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.25);"><div style="width:64px;height:64px;background:rgba(0,0,0,0.65);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,0.4);"><div style="width:0;height:0;border-style:solid;border-width:12px 0 12px 22px;border-color:transparent transparent transparent #ffffff;margin-left:5px;"></div></div></div></div>`}<div style="padding:14px 16px;background:#fff;display:flex;align-items:center;gap:10px;"><div style="width:32px;height:32px;background:#ef4444;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;"><div style="width:0;height:0;border-style:solid;border-width:6px 0 6px 11px;border-color:transparent transparent transparent #ffffff;margin-left:2px;"></div></div><div><p style="font-size:14px;font-weight:600;color:#1e293b;margin:0 0 2px;">${title}</p><p style="font-size:12px;color:#64748b;margin:0;">${escapeHtml(caption)}</p></div></div></a></div>`;
+}
+const TH = "padding:8px 12px;text-align:left;background:#f8fafc;border:1px solid #e2e8f0";
+const TD = "padding:8px 12px;border:1px solid #e2e8f0";
+const DEFAULT_EMAIL_TEMPLATE_BLOCK_GROUPS = [
+	{
+		name: "Buttons",
+		blocks: [
+			{
+				key: "btn-primary",
+				label: "Primary Button",
+				html: "<div style=\"text-align:center;margin:16px 0\"><a href=\"#\" style=\"display:inline-block;padding:12px 28px;background:#3B82F6;color:#fff;border-radius:6px;text-decoration:none;font-weight:600\">Button Text</a></div>"
+			},
+			{
+				key: "btn-secondary",
+				label: "Secondary Button",
+				html: "<div style=\"text-align:center;margin:16px 0\"><a href=\"#\" style=\"display:inline-block;padding:12px 28px;background:#64748b;color:#fff;border-radius:6px;text-decoration:none;font-weight:600\">Button Text</a></div>"
+			},
+			{
+				key: "btn-outline",
+				label: "Outline Button",
+				html: "<div style=\"text-align:center;margin:16px 0\"><a href=\"#\" style=\"display:inline-block;padding:12px 28px;border:2px solid #3B82F6;color:#3B82F6;border-radius:6px;text-decoration:none;font-weight:600\">Button Text</a></div>"
+			},
+			{
+				key: "btn-link",
+				label: "Link Button",
+				html: "<div style=\"margin:8px 0\"><a href=\"#\" style=\"color:#3B82F6;text-decoration:underline\">Link Text</a></div>"
+			}
+		]
+	},
+	{
+		name: "Spacing",
+		blocks: [
+			{
+				key: "spacer-sm",
+				label: "Small Spacer",
+				html: "<div style=\"height:8px\">&nbsp;</div>"
+			},
+			{
+				key: "spacer-md",
+				label: "Medium Spacer",
+				html: "<div style=\"height:24px\">&nbsp;</div>"
+			},
+			{
+				key: "spacer-lg",
+				label: "Large Spacer",
+				html: "<div style=\"height:48px\">&nbsp;</div>"
+			},
+			{
+				key: "divider",
+				label: "Divider Line",
+				html: "<hr style=\"border:none;border-top:1px solid #e2e8f0;margin:16px 0\"/>"
+			}
+		]
+	},
+	{
+		name: "Layout",
+		blocks: [{
+			key: "layout-2col",
+			label: "Two Columns",
+			html: "<table style=\"width:100%;border-collapse:collapse\"><tr><td style=\"width:50%;padding:8px;vertical-align:top\"><p>Left column</p></td><td style=\"width:50%;padding:8px;vertical-align:top\"><p>Right column</p></td></tr></table>"
+		}, {
+			key: "layout-3col",
+			label: "Three Columns",
+			html: "<table style=\"width:100%;border-collapse:collapse\"><tr><td style=\"width:33%;padding:8px;vertical-align:top\"><p>Col 1</p></td><td style=\"width:33%;padding:8px;vertical-align:top\"><p>Col 2</p></td><td style=\"width:34%;padding:8px;vertical-align:top\"><p>Col 3</p></td></tr></table>"
+		}]
+	},
+	{
+		name: "Content",
+		blocks: [{
+			key: "text-block",
+			label: "Text Block",
+			html: "<p>Enter your text here...</p>"
+		}, {
+			key: "image-block",
+			label: "Image Block",
+			html: "<div style=\"text-align:center;margin:8px 0\"><img src=\"https://placehold.co/600x200/e2e8f0/94a3b8?text=Image\" alt=\"Image\" style=\"max-width:100%;border-radius:8px\"/></div>"
+		}]
+	},
+	{
+		name: "Tables",
+		blocks: [{
+			key: "table-2col",
+			label: "Two-Column Table",
+			html: `<table style="width:100%;border-collapse:collapse;border:1px solid #e2e8f0"><tr><th style="${TH}">Header 1</th><th style="${TH}">Header 2</th></tr><tr><td style="${TD}">Data</td><td style="${TD}">Data</td></tr></table>`
+		}, {
+			key: "table-3col",
+			label: "Three-Column Table",
+			html: `<table style="width:100%;border-collapse:collapse;border:1px solid #e2e8f0"><tr><th style="${TH}">Header 1</th><th style="${TH}">Header 2</th><th style="${TH}">Header 3</th></tr><tr><td style="${TD}">Data</td><td style="${TD}">Data</td><td style="${TD}">Data</td></tr></table>`
+		}]
+	}
+];
+const DEFAULT_EMAIL_TEMPLATE_VARIABLE_GROUPS = [{
+	name: "Contact",
+	variables: [
+		{
+			key: "first_name",
+			label: "First Name",
+			example: "John"
+		},
+		{
+			key: "last_name",
+			label: "Last Name",
+			example: "Smith"
+		},
+		{
+			key: "full_name",
+			label: "Full Name",
+			example: "John Smith"
+		},
+		{
+			key: "email",
+			label: "Email",
+			example: "john@example.com"
+		},
+		{
+			key: "phone",
+			label: "Phone",
+			example: "(512) 555-0100"
+		}
+	]
+}];
+const FONT_SIZE_OPTIONS = [
+	"10",
+	"12",
+	"14",
+	"16",
+	"18",
+	"20",
+	"24",
+	"28",
+	"32",
+	"36"
+].map((n) => ({
+	value: `${n}px`,
+	label: `${n}px`
+}));
+const HEADING_OPTIONS = [
+	{
+		value: "p",
+		label: "Normal"
+	},
+	{
+		value: "h1",
+		label: "Heading 1"
+	},
+	{
+		value: "h2",
+		label: "Heading 2"
+	},
+	{
+		value: "h3",
+		label: "Heading 3"
+	}
+];
+const SPACING_OPTIONS = [
+	{
+		value: "",
+		label: "None"
+	},
+	{
+		value: "8px",
+		label: "Small (8px)"
+	},
+	{
+		value: "16px",
+		label: "Medium (16px)"
+	},
+	{
+		value: "32px",
+		label: "Large (32px)"
+	}
+];
+const CTA_TYPE_OPTIONS = [
+	{
+		value: "",
+		label: "None (use video default)"
+	},
+	{
+		value: "schedule",
+		label: "Schedule a Call"
+	},
+	{
+		value: "contact",
+		label: "Contact Me"
+	},
+	{
+		value: "custom",
+		label: "Custom"
+	}
+];
+const PLAYBACK_OPTIONS = [{
+	value: "click",
+	label: "Click to Play"
+}, {
+	value: "autoplay",
+	label: "Autoplay"
+}];
+const DEFAULT_AI_EXAMPLES = [
+	"Follow up after a showing",
+	"Open house invitation",
+	"Market update",
+	"Thank you after closing"
+];
+const DEFAULT_VIDEO_LINK = (video) => video.shareLink;
+const EMPTY_VIDEO_DEFAULTS = {
+	autoplay: false,
+	caption: "",
+	ctaType: "",
+	ctaUrl: "",
+	ctaLabel: "",
+	hideReactions: false
+};
+var EmailTemplateEditorComponent = class EmailTemplateEditorComponent {
+	constructor() {
+		this.host = inject(ElementRef);
+		this.injector = inject(Injector);
+		this.toast = inject(ToastService);
+		this.template = input(null, ...ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []);
+		this.categories = input([], ...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+		this.categoryPlaceholder = input("Select category...", ...ngDevMode ? [{ debugName: "categoryPlaceholder" }] : /* istanbul ignore next */ []);
+		this.assignmentOptions = input([], ...ngDevMode ? [{ debugName: "assignmentOptions" }] : /* istanbul ignore next */ []);
+		this.featuredAssignmentKey = input(null, ...ngDevMode ? [{ debugName: "featuredAssignmentKey" }] : /* istanbul ignore next */ []);
+		this.assignmentsDescription = input("Assign this template to automated email triggers. When triggered, the system will send this template.", ...ngDevMode ? [{ debugName: "assignmentsDescription" }] : /* istanbul ignore next */ []);
+		this.textEnabled = input(false, ...ngDevMode ? [{ debugName: "textEnabled" }] : /* istanbul ignore next */ []);
+		this.variableGroups = input(DEFAULT_EMAIL_TEMPLATE_VARIABLE_GROUPS, ...ngDevMode ? [{ debugName: "variableGroups" }] : /* istanbul ignore next */ []);
+		this.blockGroups = input(DEFAULT_EMAIL_TEMPLATE_BLOCK_GROUPS, ...ngDevMode ? [{ debugName: "blockGroups" }] : /* istanbul ignore next */ []);
+		this.aiExamples = input(DEFAULT_AI_EXAMPLES, ...ngDevMode ? [{ debugName: "aiExamples" }] : /* istanbul ignore next */ []);
+		this.namePlaceholder = input("e.g. Follow-Up — Friendly", ...ngDevMode ? [{ debugName: "namePlaceholder" }] : /* istanbul ignore next */ []);
+		this.subjectPlaceholder = input("e.g. Following up on {{property_address}}", ...ngDevMode ? [{ debugName: "subjectPlaceholder" }] : /* istanbul ignore next */ []);
+		this.backLabel = input("Email Messages", ...ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []);
+		this.createLabel = input("Create Template", ...ngDevMode ? [{ debugName: "createLabel" }] : /* istanbul ignore next */ []);
+		this.editLabel = input("Edit Template", ...ngDevMode ? [{ debugName: "editLabel" }] : /* istanbul ignore next */ []);
+		this.systemNote = input("This is a built-in system template, so it can be viewed but not changed.", ...ngDevMode ? [{ debugName: "systemNote" }] : /* istanbul ignore next */ []);
+		this.readOnlyNote = input("You have read-only access to email templates, so this template can be viewed but not saved.", ...ngDevMode ? [{ debugName: "readOnlyNote" }] : /* istanbul ignore next */ []);
+		this.idPrefix = input("tpl", ...ngDevMode ? [{ debugName: "idPrefix" }] : /* istanbul ignore next */ []);
+		this.maxBodyLength = input(EMAIL_TEMPLATE_MAX_BODY, ...ngDevMode ? [{ debugName: "maxBodyLength" }] : /* istanbul ignore next */ []);
+		this.maxTextLength = input(255, ...ngDevMode ? [{ debugName: "maxTextLength" }] : /* istanbul ignore next */ []);
+		this.fullAccess = input(true, ...ngDevMode ? [{ debugName: "fullAccess" }] : /* istanbul ignore next */ []);
+		this.systemTemplate = input(false, ...ngDevMode ? [{ debugName: "systemTemplate" }] : /* istanbul ignore next */ []);
+		this.aiEnabled = input(true, ...ngDevMode ? [{ debugName: "aiEnabled" }] : /* istanbul ignore next */ []);
+		this.testSendEnabled = input(true, ...ngDevMode ? [{ debugName: "testSendEnabled" }] : /* istanbul ignore next */ []);
+		this.videosEnabled = input(true, ...ngDevMode ? [{ debugName: "videosEnabled" }] : /* istanbul ignore next */ []);
+		this.saving = input(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+		this.testSending = input(false, ...ngDevMode ? [{ debugName: "testSending" }] : /* istanbul ignore next */ []);
+		this.aiGenerating = input(false, ...ngDevMode ? [{ debugName: "aiGenerating" }] : /* istanbul ignore next */ []);
+		this.videos = input([], ...ngDevMode ? [{ debugName: "videos" }] : /* istanbul ignore next */ []);
+		this.videosLoading = input(false, ...ngDevMode ? [{ debugName: "videosLoading" }] : /* istanbul ignore next */ []);
+		this.videoDefaults = input(EMPTY_VIDEO_DEFAULTS, ...ngDevMode ? [{ debugName: "videoDefaults" }] : /* istanbul ignore next */ []);
+		this.videoLink = input(DEFAULT_VIDEO_LINK, ...ngDevMode ? [{ debugName: "videoLink" }] : /* istanbul ignore next */ []);
+		this.noVideosHint = input("Upload videos on the Video Messages page.", ...ngDevMode ? [{ debugName: "noVideosHint" }] : /* istanbul ignore next */ []);
+		this.back = output();
+		this.save = output();
+		this.testSend = output();
+		this.aiGenerate = output();
+		this.videosRequested = output();
+		this.useAsMine = output();
+		this.editingId = signal(null, ...ngDevMode ? [{ debugName: "editingId" }] : /* istanbul ignore next */ []);
+		this.isNew = computed(() => !this.editingId(), ...ngDevMode ? [{ debugName: "isNew" }] : /* istanbul ignore next */ []);
+		this.name = signal("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this.subject = signal("", ...ngDevMode ? [{ debugName: "subject" }] : /* istanbul ignore next */ []);
+		this.category = signal("", ...ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []);
+		this.useAllYear = signal(true, ...ngDevMode ? [{ debugName: "useAllYear" }] : /* istanbul ignore next */ []);
+		this.activeFrom = signal("", ...ngDevMode ? [{ debugName: "activeFrom" }] : /* istanbul ignore next */ []);
+		this.activeTo = signal("", ...ngDevMode ? [{ debugName: "activeTo" }] : /* istanbul ignore next */ []);
+		this.videoId = signal(null, ...ngDevMode ? [{ debugName: "videoId" }] : /* istanbul ignore next */ []);
+		this.videoTitle = signal(null, ...ngDevMode ? [{ debugName: "videoTitle" }] : /* istanbul ignore next */ []);
+		this.assignmentChannels = signal({}, ...ngDevMode ? [{ debugName: "assignmentChannels" }] : /* istanbul ignore next */ []);
+		this.assignmentState = computed(() => this.assignmentOptions().map((o) => ({
+			...o,
+			email: !!this.assignmentChannels()[o.key]?.email,
+			text: !!this.assignmentChannels()[o.key]?.text
+		})), ...ngDevMode ? [{ debugName: "assignmentState" }] : /* istanbul ignore next */ []);
+		this.blocks = signal([], ...ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []);
+		this.selectedBlockId = signal(null, ...ngDevMode ? [{ debugName: "selectedBlockId" }] : /* istanbul ignore next */ []);
+		this.initializedBlockIds = /* @__PURE__ */ new Set();
+		this.savedRange = null;
+		this.blockEditors = viewChildren("blockEditor", ...ngDevMode ? [{ debugName: "blockEditors" }] : /* istanbul ignore next */ []);
+		this.colorInputRef = viewChild("colorInput", ...ngDevMode ? [{ debugName: "colorInputRef" }] : /* istanbul ignore next */ []);
+		this.loadedBody = signal(null, ...ngDevMode ? [{ debugName: "loadedBody" }] : /* istanbul ignore next */ []);
+		this.bodyEdited = signal(false, ...ngDevMode ? [{ debugName: "bodyEdited" }] : /* istanbul ignore next */ []);
+		this.savedSnapshot = signal(null, ...ngDevMode ? [{ debugName: "savedSnapshot" }] : /* istanbul ignore next */ []);
+		this.dragFromPalette = null;
+		this.dragFromCanvas = signal(null, ...ngDevMode ? [{ debugName: "dragFromCanvas" }] : /* istanbul ignore next */ []);
+		this.dragOverIndex = signal(null, ...ngDevMode ? [{ debugName: "dragOverIndex" }] : /* istanbul ignore next */ []);
+		this.currentColor = signal("#1e293b", ...ngDevMode ? [{ debugName: "currentColor" }] : /* istanbul ignore next */ []);
+		this.blockSpacing = signal("", ...ngDevMode ? [{ debugName: "blockSpacing" }] : /* istanbul ignore next */ []);
+		this.headingKey = signal(0, ...ngDevMode ? [{ debugName: "headingKey" }] : /* istanbul ignore next */ []);
+		this.sizeKey = signal(0, ...ngDevMode ? [{ debugName: "sizeKey" }] : /* istanbul ignore next */ []);
+		this.headingOptions = HEADING_OPTIONS;
+		this.fontSizeOptions = FONT_SIZE_OPTIONS;
+		this.spacingOptions = SPACING_OPTIONS;
+		this.ctaTypeOptions = CTA_TYPE_OPTIONS;
+		this.playbackOptions = PLAYBACK_OPTIONS;
+		this.showLinkDialog = signal(false, ...ngDevMode ? [{ debugName: "showLinkDialog" }] : /* istanbul ignore next */ []);
+		this.linkUrl = signal("", ...ngDevMode ? [{ debugName: "linkUrl" }] : /* istanbul ignore next */ []);
+		this.linkText = signal("", ...ngDevMode ? [{ debugName: "linkText" }] : /* istanbul ignore next */ []);
+		this.linkTextFromSelection = signal(false, ...ngDevMode ? [{ debugName: "linkTextFromSelection" }] : /* istanbul ignore next */ []);
+		this.showImageDialog = signal(false, ...ngDevMode ? [{ debugName: "showImageDialog" }] : /* istanbul ignore next */ []);
+		this.imageUrl = signal("", ...ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []);
+		this.imageAlt = signal("", ...ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []);
+		this.showTestSendDialog = signal(false, ...ngDevMode ? [{ debugName: "showTestSendDialog" }] : /* istanbul ignore next */ []);
+		this.testSendEmail = signal("", ...ngDevMode ? [{ debugName: "testSendEmail" }] : /* istanbul ignore next */ []);
+		this.showAiPanel = signal(false, ...ngDevMode ? [{ debugName: "showAiPanel" }] : /* istanbul ignore next */ []);
+		this.aiPrompt = signal("", ...ngDevMode ? [{ debugName: "aiPrompt" }] : /* istanbul ignore next */ []);
+		this.showAssignmentConfig = signal(false, ...ngDevMode ? [{ debugName: "showAssignmentConfig" }] : /* istanbul ignore next */ []);
+		this.configTarget = signal(null, ...ngDevMode ? [{ debugName: "configTarget" }] : /* istanbul ignore next */ []);
+		this.configEmail = signal(false, ...ngDevMode ? [{ debugName: "configEmail" }] : /* istanbul ignore next */ []);
+		this.configText = signal(false, ...ngDevMode ? [{ debugName: "configText" }] : /* istanbul ignore next */ []);
+		this.activeEditorTab = signal("edit", ...ngDevMode ? [{ debugName: "activeEditorTab" }] : /* istanbul ignore next */ []);
+		this.activeRightTab = signal("blocks", ...ngDevMode ? [{ debugName: "activeRightTab" }] : /* istanbul ignore next */ []);
+		this.blockSearch = signal("", ...ngDevMode ? [{ debugName: "blockSearch" }] : /* istanbul ignore next */ []);
+		this.assignmentSearch = signal("", ...ngDevMode ? [{ debugName: "assignmentSearch" }] : /* istanbul ignore next */ []);
+		this.toggledGroups = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "toggledGroups" }] : /* istanbul ignore next */ []);
+		this.videoAutoplay = signal(false, ...ngDevMode ? [{ debugName: "videoAutoplay" }] : /* istanbul ignore next */ []);
+		this.videoCaption = signal("", ...ngDevMode ? [{ debugName: "videoCaption" }] : /* istanbul ignore next */ []);
+		this.videoCtaType = signal("", ...ngDevMode ? [{ debugName: "videoCtaType" }] : /* istanbul ignore next */ []);
+		this.videoCtaUrl = signal("", ...ngDevMode ? [{ debugName: "videoCtaUrl" }] : /* istanbul ignore next */ []);
+		this.videoCtaLabel = signal("", ...ngDevMode ? [{ debugName: "videoCtaLabel" }] : /* istanbul ignore next */ []);
+		this.videoHideReactions = signal(false, ...ngDevMode ? [{ debugName: "videoHideReactions" }] : /* istanbul ignore next */ []);
+		this.canWrite = computed(() => this.fullAccess() && !this.systemTemplate(), ...ngDevMode ? [{ debugName: "canWrite" }] : /* istanbul ignore next */ []);
+		this.canCopySystem = computed(() => this.fullAccess() && this.systemTemplate() && !!this.editingId(), ...ngDevMode ? [{ debugName: "canCopySystem" }] : /* istanbul ignore next */ []);
+		this.filteredAssignments = computed(() => {
+			const featured = this.featuredAssignmentKey();
+			const all = this.assignmentState();
+			const ordered = featured ? [...all.filter((a) => a.key === featured), ...all.filter((a) => a.key !== featured)] : all;
+			const q = this.assignmentSearch().trim().toLowerCase();
+			return q ? ordered.filter((a) => a.name.toLowerCase().includes(q) || a.description.toLowerCase().includes(q)) : ordered;
+		}, ...ngDevMode ? [{ debugName: "filteredAssignments" }] : /* istanbul ignore next */ []);
+		this.filteredBlockGroups = computed(() => {
+			const q = this.blockSearch().trim().toLowerCase();
+			const groups = this.blockGroups();
+			if (!q) return groups;
+			return groups.map((g) => ({
+				...g,
+				blocks: g.blocks.filter((b) => b.label.toLowerCase().includes(q))
+			})).filter((g) => g.blocks.length > 0);
+		}, ...ngDevMode ? [{ debugName: "filteredBlockGroups" }] : /* istanbul ignore next */ []);
+		this.serialized = computed(() => this.serialize(this.blocks()), ...ngDevMode ? [{ debugName: "serialized" }] : /* istanbul ignore next */ []);
+		this.previewHtml = this.serialized;
+		this.bodyLength = computed(() => this.serialized().trim().length, ...ngDevMode ? [{ debugName: "bodyLength" }] : /* istanbul ignore next */ []);
+		this.bodyHasContent = computed(() => this.blocks().some((b) => blockHasContent(b.html)), ...ngDevMode ? [{ debugName: "bodyHasContent" }] : /* istanbul ignore next */ []);
+		this.bodyUnchanged = computed(() => this.loadedBody() !== null && !this.bodyEdited(), ...ngDevMode ? [{ debugName: "bodyUnchanged" }] : /* istanbul ignore next */ []);
+		this.nameError = computed(() => {
+			const v = this.name().trim();
+			if (!v) return "Template name is required.";
+			return v.length > this.maxTextLength() ? `Name is too long (max ${this.maxTextLength()} characters).` : "";
+		}, ...ngDevMode ? [{ debugName: "nameError" }] : /* istanbul ignore next */ []);
+		this.subjectError = computed(() => {
+			const v = this.subject().trim();
+			if (!v) return "Subject line is required.";
+			return v.length > this.maxTextLength() ? `Subject is too long (max ${this.maxTextLength()} characters).` : "";
+		}, ...ngDevMode ? [{ debugName: "subjectError" }] : /* istanbul ignore next */ []);
+		this.bodyError = computed(() => {
+			if (!this.bodyHasContent()) return "Add a message: the email needs some text or an image.";
+			const n = this.bodyLength();
+			const max = this.maxBodyLength();
+			return n > max && !this.bodyUnchanged() ? `Message is too long (max ${max.toLocaleString("en-US")} characters; it is ${n.toLocaleString("en-US")}).` : "";
+		}, ...ngDevMode ? [{ debugName: "bodyError" }] : /* istanbul ignore next */ []);
+		this.datesError = computed(() => {
+			if (this.useAllYear() || !this.activeFrom() || !this.activeTo()) return "";
+			return this.activeTo() < this.activeFrom() ? "Active To must be on or after Active From." : "";
+		}, ...ngDevMode ? [{ debugName: "datesError" }] : /* istanbul ignore next */ []);
+		this.canSave = computed(() => !this.nameError() && !this.subjectError() && !this.bodyError() && !this.datesError(), ...ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []);
+		this.saveDisabled = computed(() => !this.canWrite() || !this.canSave(), ...ngDevMode ? [{ debugName: "saveDisabled" }] : /* istanbul ignore next */ []);
+		this.normalizedLink = computed(() => {
+			const url = this.linkUrl().trim();
+			if (!url) return "";
+			return url.startsWith("http://") || url.startsWith("https://") || url.startsWith("mailto:") ? url : "https://" + url;
+		}, ...ngDevMode ? [{ debugName: "normalizedLink" }] : /* istanbul ignore next */ []);
+		this.linkUrlError = computed(() => {
+			const url = this.normalizedLink();
+			if (!url) return "";
+			if (url.startsWith("mailto:")) return /^mailto:[^\s@"<>]+@[^\s@"<>]+\.[^\s@"<>]+$/.test(url) ? "" : "Enter a valid email address.";
+			return isWebUrl(url) ? "" : "Enter a valid web address, like https://example.com.";
+		}, ...ngDevMode ? [{ debugName: "linkUrlError" }] : /* istanbul ignore next */ []);
+		this.canInsertLink = computed(() => !!this.linkUrl().trim() && !this.linkUrlError(), ...ngDevMode ? [{ debugName: "canInsertLink" }] : /* istanbul ignore next */ []);
+		this.imageUrlError = computed(() => {
+			const url = this.imageUrl().trim();
+			return !url || isWebUrl(url) ? "" : "Enter a valid image address, like https://example.com/image.jpg.";
+		}, ...ngDevMode ? [{ debugName: "imageUrlError" }] : /* istanbul ignore next */ []);
+		this.canInsertImage = computed(() => !!this.imageUrl().trim() && !this.imageUrlError(), ...ngDevMode ? [{ debugName: "canInsertImage" }] : /* istanbul ignore next */ []);
+		this.testEmailError = computed(() => {
+			const email = this.testSendEmail().trim();
+			return !email || isValidEmailAddress(email) ? "" : "Enter a valid email address.";
+		}, ...ngDevMode ? [{ debugName: "testEmailError" }] : /* istanbul ignore next */ []);
+		this.canSendTest = computed(() => this.canWrite() && !!this.editingId() && !!this.testSendEmail().trim() && !this.testEmailError() && !this.testSending(), ...ngDevMode ? [{ debugName: "canSendTest" }] : /* istanbul ignore next */ []);
+		this.hasUnsavedChanges = computed(() => !!this.editingId() && this.savedSnapshot() !== null && this.savedSnapshot() !== this.snapshot(), ...ngDevMode ? [{ debugName: "hasUnsavedChanges" }] : /* istanbul ignore next */ []);
+		this.canGenerate = computed(() => !!this.aiPrompt().trim() && !this.aiGenerating(), ...ngDevMode ? [{ debugName: "canGenerate" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const t = this.template();
+			untracked(() => this.applyTemplate(t));
+		});
+		effect(() => {
+			const d = this.videoDefaults();
+			untracked(() => {
+				this.videoAutoplay.set(d.autoplay);
+				this.videoCaption.set(d.caption);
+				this.videoCtaType.set(d.ctaType);
+				this.videoCtaUrl.set(d.ctaUrl);
+				this.videoCtaLabel.set(d.ctaLabel);
+				this.videoHideReactions.set(d.hideReactions);
+			});
+		});
+		effect(() => {
+			if (this.showLinkDialog() || this.showImageDialog()) afterNextRender(() => this.host.nativeElement.querySelector(".link-dialog input")?.focus(), { injector: this.injector });
+		});
+		afterEveryRender(() => {
+			const current = this.blocks();
+			for (const ref of this.blockEditors()) {
+				const el = ref.nativeElement;
+				const blockId = el.dataset["blockId"];
+				if (blockId && !this.initializedBlockIds.has(blockId)) {
+					const block = current.find((b) => b.id === blockId);
+					if (block !== void 0) {
+						el.innerHTML = block.html;
+						if (block.spacing) el.style.padding = `${block.spacing} 0`;
+						this.initializedBlockIds.add(blockId);
+					}
+				}
+			}
+		});
+	}
+	markSaved(id = this.editingId()) {
+		this.syncActiveBlockHtml();
+		this.editingId.set(id);
+		this.savedSnapshot.set(this.snapshot());
+	}
+	closeTestSend() {
+		this.showTestSendDialog.set(false);
+	}
+	addGeneratedHtml(html) {
+		const block = {
+			id: this.genId(),
+			html: this.stripBlockWrappers(html)
+		};
+		this.blocks.update((b) => [...b, block]);
+		this.bodyEdited.set(true);
+		this.selectedBlockId.set(block.id);
+		this.showAiPanel.set(false);
+		this.toast.show("AI content added to your email");
+	}
+	applyTemplate(t) {
+		this.initializedBlockIds = /* @__PURE__ */ new Set();
+		this.editingId.set(t?.id ?? null);
+		this.name.set(t?.name ?? "");
+		this.subject.set(t?.subject ?? "");
+		this.category.set(t?.category ?? "");
+		this.useAllYear.set(t?.useAllYear ?? true);
+		this.activeFrom.set(t?.activeFrom ?? "");
+		this.activeTo.set(t?.activeTo ?? "");
+		this.videoId.set(t?.videoId ?? null);
+		this.videoTitle.set(t?.videoTitle ?? null);
+		this.blocks.set(!t || !t.id && !(t.body ?? "").trim() ? [{
+			id: this.genId(),
+			html: `<p>${EMAIL_TEMPLATE_START_TEXT}</p>`
+		}] : this.htmlToBlocks(t.body ?? ""));
+		this.selectedBlockId.set(null);
+		this.blockSpacing.set("");
+		this.loadedBody.set(t?.id ? t.body ?? "" : null);
+		this.bodyEdited.set(false);
+		this.assignmentChannels.set(Object.fromEntries((t?.assignments ?? []).map((c) => [c.key, {
+			email: !!c.email,
+			text: !!c.text
+		}])));
+		this.savedSnapshot.set(t?.id ? this.snapshot() : null);
+	}
+	onSave() {
+		if (this.saving() || !this.canSave() || !this.canWrite()) return;
+		const keepStoredBody = this.bodyUnchanged() && this.bodyLength() > this.maxBodyLength();
+		this.syncActiveBlockHtml();
+		this.save.emit({
+			name: this.name(),
+			subject: this.subject(),
+			body: keepStoredBody ? this.loadedBody() ?? "" : this.serialized(),
+			category: this.category(),
+			useAllYear: this.useAllYear(),
+			activeFrom: !this.useAllYear() && this.activeFrom() ? this.activeFrom() : null,
+			activeTo: !this.useAllYear() && this.activeTo() ? this.activeTo() : null,
+			videoId: this.videoId(),
+			assignments: this.assignmentState().filter((a) => a.email || a.text).map((a) => ({
+				key: a.key,
+				email: a.email,
+				text: a.text
+			}))
+		});
+	}
+	snapshot() {
+		return JSON.stringify([
+			this.name(),
+			this.subject(),
+			this.category(),
+			this.useAllYear(),
+			this.activeFrom(),
+			this.activeTo(),
+			this.serialized()
+		]);
+	}
+	serialize(blocks) {
+		return blocks.map((b) => {
+			return `<div data-block="true">${b.spacing ? `<div data-spacing="true" style="padding:${b.spacing} 0">${b.html}</div>` : b.html}</div>`;
+		}).join("");
+	}
+	htmlToBlocks(html) {
+		if (!html || !html.trim()) return [{
+			id: this.genId(),
+			html: "<p></p>"
+		}];
+		const div = new DOMParser().parseFromString(html, "text/html").body;
+		const blockDivs = Array.from(div.querySelectorAll(":scope > [data-block]"));
+		if (blockDivs.length > 0) return blockDivs.map((el) => {
+			const spacingEl = el.querySelector(":scope > [data-spacing]");
+			if (spacingEl) {
+				const spacing = spacingEl.style.padding?.split(" ")[0] || void 0;
+				return {
+					id: this.genId(),
+					html: spacingEl.innerHTML,
+					spacing
+				};
+			}
+			return {
+				id: this.genId(),
+				html: el.innerHTML
+			};
+		});
+		return [{
+			id: this.genId(),
+			html
+		}];
+	}
+	stripBlockWrappers(html) {
+		if (!html || !html.includes("data-block")) return html;
+		return html.replace(/<\/div>\s*(?=<div[^>]*data-block)/g, "").replace(/<div[^>]*data-block[^>]*>/g, "").replace(/<\/div>\s*$/, "");
+	}
+	genId() {
+		return Math.random().toString(36).slice(2, 10);
+	}
+	editorFor(id) {
+		return id ? this.blockEditors().find((r) => r.nativeElement.dataset["blockId"] === id) : void 0;
+	}
+	syncActiveBlockHtml() {
+		const dom = /* @__PURE__ */ new Map();
+		for (const ref of this.blockEditors()) {
+			const id = ref.nativeElement.dataset["blockId"];
+			if (id) dom.set(id, ref.nativeElement.innerHTML);
+		}
+		if (dom.size === 0) return;
+		this.blocks.update((list) => list.map((b) => dom.has(b.id) && dom.get(b.id) !== b.html ? {
+			...b,
+			html: dom.get(b.id)
+		} : b));
+	}
+	syncBlock() {
+		const id = this.selectedBlockId();
+		const ref = this.editorFor(id);
+		if (!id || !ref) return;
+		const html = ref.nativeElement.innerHTML;
+		this.blocks.update((list) => list.map((b) => b.id === id ? {
+			...b,
+			html
+		} : b));
+	}
+	setEditorTab(tab) {
+		const previous = this.activeEditorTab();
+		if (tab !== "edit") this.syncActiveBlockHtml();
+		if (tab === "edit" && previous !== "edit") this.initializedBlockIds = /* @__PURE__ */ new Set();
+		this.activeEditorTab.set(tab);
+	}
+	addBlock(blockKey = "text-block") {
+		if (!this.canWrite()) return;
+		this.addBlockHtml(this.blockHtml(blockKey));
+	}
+	addBlockHtml(html, at) {
+		this.bodyEdited.set(true);
+		const block = {
+			id: this.genId(),
+			html
+		};
+		this.blocks.update((list) => at === void 0 ? [...list, block] : [
+			...list.slice(0, at),
+			block,
+			...list.slice(at)
+		]);
+		this.selectedBlockId.set(block.id);
+		return block;
+	}
+	deleteBlock(index) {
+		if (!this.canWrite()) return;
+		const list = this.blocks();
+		if (index < 0 || index >= list.length) return;
+		if (list.length === 1) {
+			const ref = this.editorFor(list[0].id);
+			const alreadyEmpty = list[0].html === "<p></p>" && (!ref || ref.nativeElement.innerHTML === "<p></p>");
+			this.blocks.set([{
+				...list[0],
+				html: "<p></p>"
+			}]);
+			if (ref) ref.nativeElement.innerHTML = "<p></p>";
+			if (!alreadyEmpty) this.bodyEdited.set(true);
+			return;
+		}
+		this.bodyEdited.set(true);
+		this.initializedBlockIds.delete(list[index].id);
+		const next = list.filter((_, i) => i !== index);
+		this.blocks.set(next);
+		this.selectedBlockId.set(next[Math.min(index, next.length - 1)].id);
+	}
+	duplicateBlock(index) {
+		if (!this.canWrite()) return;
+		const list = this.blocks();
+		if (index < 0 || index >= list.length) return;
+		this.bodyEdited.set(true);
+		const src = list[index];
+		const html = this.editorFor(src.id)?.nativeElement.innerHTML ?? src.html;
+		const copy = {
+			id: this.genId(),
+			html,
+			spacing: src.spacing
+		};
+		this.blocks.set([
+			...list.slice(0, index + 1),
+			copy,
+			...list.slice(index + 1)
+		]);
+		this.selectedBlockId.set(copy.id);
+	}
+	moveBlock(index, direction) {
+		if (!this.canWrite()) return;
+		const list = this.blocks();
+		const target = index + direction;
+		if (index < 0 || index >= list.length || target < 0 || target >= list.length) return;
+		this.bodyEdited.set(true);
+		const next = [...list];
+		[next[index], next[target]] = [next[target], next[index]];
+		this.blocks.set(next);
+	}
+	onBlockInput(event, block) {
+		if (!this.canWrite()) return;
+		this.bodyEdited.set(true);
+		const html = event.target.innerHTML;
+		this.blocks.update((list) => list.map((b) => b.id === block.id ? {
+			...b,
+			html
+		} : b));
+	}
+	onBlockBeforeInput(event) {
+		if (!this.canWrite()) {
+			event.preventDefault();
+			return;
+		}
+		if (event.inputType.startsWith("delete") || event.inputType.startsWith("history")) return;
+		if (isBlockDrag(event)) {
+			event.preventDefault();
+			return;
+		}
+		const incoming = event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
+		if (!incoming) return;
+		const sel = window.getSelection();
+		const replaced = sel && !sel.isCollapsed && insideEditorBlock(sel.anchorNode) ? sel.toString().length : 0;
+		if (this.bodyLength() - replaced + escapeHtml(incoming).length > this.maxBodyLength()) event.preventDefault();
+	}
+	onBlockFocus(block) {
+		this.selectedBlockId.set(block.id);
+		this.blockSpacing.set(block.spacing ?? "");
+	}
+	onPaletteDragStart(event, block) {
+		if (!this.canWrite()) {
+			event.preventDefault();
+			return;
+		}
+		this.dragFromPalette = block;
+		this.dragFromCanvas.set(null);
+		event.dataTransfer.effectAllowed = "copy";
+		event.dataTransfer.setData(EMAIL_BLOCK_DRAG_TYPE, block.key);
+	}
+	onBlockDragStart(event, index, wrapper) {
+		if (!this.canWrite()) {
+			event.preventDefault();
+			return;
+		}
+		if (event.target !== event.currentTarget) return;
+		this.dragFromCanvas.set(index);
+		this.dragFromPalette = null;
+		event.dataTransfer.effectAllowed = "move";
+		event.dataTransfer.setData(EMAIL_BLOCK_DRAG_TYPE, String(index));
+		if (wrapper) event.dataTransfer.setDragImage?.(wrapper, 0, 0);
+		event.stopPropagation();
+	}
+	onBlockDragEnd() {
+		this.dragFromCanvas.set(null);
+		this.dragFromPalette = null;
+		this.dragOverIndex.set(null);
+	}
+	onCanvasDragOver(event) {
+		if (this.canWrite() && isBlockDrag(event)) event.preventDefault();
+	}
+	onDropZoneDragOver(event, index) {
+		if (!this.canWrite() || !isBlockDrag(event)) return;
+		event.preventDefault();
+		event.dataTransfer.dropEffect = this.dragFromPalette ? "copy" : "move";
+		if (this.dragOverIndex() !== index) this.dragOverIndex.set(index);
+	}
+	onDropZoneLeave() {
+		this.dragOverIndex.set(null);
+	}
+	onDropZoneDrop(event, insertBefore) {
+		if (!this.canWrite()) {
+			event.preventDefault();
+			return;
+		}
+		const fromCanvas = this.dragFromCanvas();
+		if (this.dragFromPalette === null && fromCanvas === null) return;
+		event.preventDefault();
+		this.dragOverIndex.set(null);
+		if (this.dragFromPalette) {
+			const html = this.dragFromPalette.html;
+			this.dragFromPalette = null;
+			this.addBlockHtml(html, insertBefore);
+		} else if (fromCanvas !== null) {
+			const to = fromCanvas < insertBefore ? insertBefore - 1 : insertBefore;
+			if (fromCanvas !== to) {
+				const next = [...this.blocks()];
+				const [moved] = next.splice(fromCanvas, 1);
+				next.splice(to, 0, moved);
+				this.blocks.set(next);
+				this.bodyEdited.set(true);
+			}
+			this.dragFromCanvas.set(null);
+		}
+	}
+	preventFocusLoss(event) {
+		if (event.target?.closest?.("select, input")) return;
+		event.preventDefault();
+	}
+	saveSelection() {
+		const sel = window.getSelection();
+		const range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+		this.savedRange = range && insideEditorBlock(range.commonAncestorContainer) ? range.cloneRange() : null;
+	}
+	restoreSelection() {
+		const saved = this.savedRange;
+		this.savedRange = null;
+		const sel = window.getSelection();
+		if (!!sel && sel.rangeCount > 0 && insideEditorBlock(sel.getRangeAt(0).commonAncestorContainer) || !saved || !saved.commonAncestorContainer.isConnected || !insideEditorBlock(saved.commonAncestorContainer)) return;
+		sel?.removeAllRanges();
+		sel?.addRange(saved);
+	}
+	activeBlockHtml() {
+		return this.editorFor(this.selectedBlockId())?.nativeElement.innerHTML ?? null;
+	}
+	runEditCommand(run) {
+		this.restoreSelection();
+		const sel = window.getSelection();
+		const overSelection = !!sel && sel.rangeCount > 0 && !sel.isCollapsed && insideEditorBlock(sel.getRangeAt(0).commonAncestorContainer);
+		const before = this.activeBlockHtml();
+		run();
+		if (overSelection || before === null || before !== this.activeBlockHtml()) this.bodyEdited.set(true);
+	}
+	execCommand(cmd, value) {
+		if (!this.canWrite()) return;
+		this.runEditCommand(() => {
+			document.execCommand(cmd, false, value ?? void 0);
+		});
+		this.syncBlock();
+	}
+	onHeading(value) {
+		this.execCommand("formatBlock", value);
+		this.headingKey.update((k) => k + 1);
+	}
+	onFontSize(value) {
+		this.applyFontSize(value);
+		this.sizeKey.update((k) => k + 1);
+	}
+	applyFontSize(size) {
+		if (!this.canWrite() || !size) return;
+		this.restoreSelection();
+		const sel = window.getSelection();
+		if (!sel || sel.rangeCount === 0) return;
+		const range = sel.getRangeAt(0);
+		if (range.collapsed || !insideEditorBlock(range.commonAncestorContainer)) return;
+		this.bodyEdited.set(true);
+		try {
+			const fragment = range.extractContents();
+			const span = document.createElement("span");
+			span.style.fontSize = size;
+			span.appendChild(fragment);
+			range.insertNode(span);
+			sel.collapse(span, 1);
+		} catch {
+			document.execCommand("insertHTML", false, `<span style="font-size:${escapeHtml(size)}">${escapeHtml(sel.toString())}</span>`);
+		}
+		this.syncBlock();
+	}
+	applyTextColor(color) {
+		if (!this.canWrite()) return;
+		this.currentColor.set(color);
+		this.runEditCommand(() => {
+			document.execCommand("styleWithCSS", false, "true");
+			document.execCommand("foreColor", false, color);
+		});
+		this.syncBlock();
+	}
+	openColorPicker() {
+		this.saveSelection();
+		this.colorInputRef()?.nativeElement.click();
+	}
+	applySpacing(value) {
+		if (!this.canWrite()) return;
+		this.blockSpacing.set(value);
+		const id = this.selectedBlockId();
+		if (!id) return;
+		const ref = this.editorFor(id);
+		if (ref) ref.nativeElement.style.padding = value ? `${value} 0` : "";
+		const block = this.blocks().find((b) => b.id === id);
+		if (!block) return;
+		const changed = (block.spacing ?? "") !== (value ?? "");
+		this.blocks.update((list) => list.map((b) => b.id === id ? {
+			...b,
+			spacing: value || void 0
+		} : b));
+		if (changed) this.bodyEdited.set(true);
+	}
+	openLinkDialog() {
+		if (!this.canWrite()) return;
+		this.saveSelection();
+		const selected = window.getSelection()?.toString() || "";
+		this.linkText.set(selected);
+		this.linkTextFromSelection.set(!!selected);
+		this.linkUrl.set("");
+		this.showLinkDialog.set(true);
+	}
+	insertLink() {
+		if (!this.canWrite() || !this.canInsertLink()) return;
+		this.bodyEdited.set(true);
+		const url = this.normalizedLink();
+		this.restoreSelection();
+		const sel = window.getSelection();
+		if (sel && sel.rangeCount > 0 && !sel.isCollapsed) {
+			document.execCommand("createLink", false, url);
+			const range = sel.getRangeAt(0);
+			(range.commonAncestorContainer instanceof Element ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement)?.querySelectorAll("a").forEach((l) => {
+				if (l.getAttribute("href") === url) l.setAttribute("target", "_blank");
+			});
+		} else {
+			const a = document.createElement("a");
+			a.setAttribute("href", url);
+			a.setAttribute("target", "_blank");
+			a.textContent = this.linkText().trim() || url;
+			document.execCommand("insertHTML", false, a.outerHTML);
+		}
+		this.syncBlock();
+		this.showLinkDialog.set(false);
+		this.linkUrl.set("");
+		this.linkText.set("");
+	}
+	openImageDialog() {
+		if (!this.canWrite()) return;
+		this.saveSelection();
+		this.imageUrl.set("");
+		this.imageAlt.set("");
+		this.showImageDialog.set(true);
+	}
+	insertImageFromUrl() {
+		if (!this.canWrite() || !this.canInsertImage()) return;
+		this.bodyEdited.set(true);
+		this.restoreSelection();
+		const img = document.createElement("img");
+		img.setAttribute("src", this.imageUrl().trim());
+		img.setAttribute("alt", this.imageAlt() || "Image");
+		img.setAttribute("style", "max-width:100%;border-radius:8px;display:block;margin:8px 0");
+		document.execCommand("insertHTML", false, img.outerHTML);
+		this.syncBlock();
+		this.showImageDialog.set(false);
+		this.imageUrl.set("");
+		this.imageAlt.set("");
+	}
+	openTestSendDialog() {
+		if (!this.canWrite()) return;
+		this.testSendEmail.set("");
+		this.showTestSendDialog.set(true);
+	}
+	onTestSend() {
+		if (!this.canSendTest()) return;
+		this.testSend.emit(this.testSendEmail().trim());
+	}
+	openAiPanel() {
+		if (!this.canWrite() || !this.aiEnabled()) return;
+		this.aiPrompt.set("");
+		this.showAiPanel.set(true);
+	}
+	onAiGenerate() {
+		if (!this.canWrite() || !this.canGenerate()) return;
+		this.aiGenerate.emit(this.aiPrompt());
+	}
+	openVideoTab() {
+		this.activeRightTab.set("video");
+		this.videosRequested.emit();
+	}
+	insertVideo(video) {
+		if (!this.canWrite()) return;
+		this.videoId.set(video.id);
+		this.videoTitle.set(video.title);
+		const link = this.videoLink()(video, {
+			autoplay: this.videoAutoplay(),
+			caption: this.videoCaption(),
+			ctaType: this.videoCtaType(),
+			ctaUrl: this.videoCtaUrl(),
+			ctaLabel: this.videoCtaLabel(),
+			hideReactions: this.videoHideReactions()
+		});
+		const caption = this.videoCaption() || (this.videoAutoplay() ? "Video will autoplay" : "Click to watch video");
+		this.addBlockHtml(buildVideoBlockHtml(video, link, caption, window.location.origin));
+		this.activeRightTab.set("blocks");
+	}
+	formatDuration(seconds) {
+		return formatVideoDuration(seconds);
+	}
+	categoryLabel(cat) {
+		return formatCategoryLabel(cat);
+	}
+	openAssignmentConfig(item) {
+		if (!this.canWrite()) return;
+		this.configTarget.set(item);
+		this.configEmail.set(item.email);
+		this.configText.set(item.text);
+		this.showAssignmentConfig.set(true);
+	}
+	saveAssignmentConfig() {
+		const target = this.configTarget();
+		if (!this.canWrite() || !target) return;
+		const email = this.configEmail();
+		const text = this.configText();
+		this.assignmentChannels.update((m) => ({
+			...m,
+			[target.key]: {
+				email,
+				text
+			}
+		}));
+		this.showAssignmentConfig.set(false);
+		this.toast.show(`${target.name} automation configured`);
+	}
+	isOpen(id) {
+		return id === "v:" + (this.variableGroups()[0]?.name ?? "") !== this.toggledGroups().has(id);
+	}
+	toggleGroup(id) {
+		this.toggledGroups.update((s) => {
+			const next = new Set(s);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}
+	insertBlock(block) {
+		if (!this.canWrite()) return;
+		this.addBlockHtml(block.html);
+	}
+	insertVariable(variable) {
+		if (!this.canWrite()) return;
+		this.runEditCommand(() => {
+			document.execCommand("insertText", false, `{{${variable.key}}}`);
+		});
+		this.syncBlock();
+	}
+	blockHtml(key) {
+		for (const g of this.blockGroups()) {
+			const found = g.blocks.find((b) => b.key === key);
+			if (found) return found.html;
+		}
+		return "<p>Block</p>";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: EmailTemplateEditorComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: EmailTemplateEditorComponent,
+			isStandalone: true,
+			selector: "ui-email-template-editor",
+			inputs: {
+				template: {
+					classPropertyName: "template",
+					publicName: "template",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				categories: {
+					classPropertyName: "categories",
+					publicName: "categories",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				categoryPlaceholder: {
+					classPropertyName: "categoryPlaceholder",
+					publicName: "categoryPlaceholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				assignmentOptions: {
+					classPropertyName: "assignmentOptions",
+					publicName: "assignmentOptions",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				featuredAssignmentKey: {
+					classPropertyName: "featuredAssignmentKey",
+					publicName: "featuredAssignmentKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				assignmentsDescription: {
+					classPropertyName: "assignmentsDescription",
+					publicName: "assignmentsDescription",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				textEnabled: {
+					classPropertyName: "textEnabled",
+					publicName: "textEnabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				variableGroups: {
+					classPropertyName: "variableGroups",
+					publicName: "variableGroups",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				blockGroups: {
+					classPropertyName: "blockGroups",
+					publicName: "blockGroups",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				aiExamples: {
+					classPropertyName: "aiExamples",
+					publicName: "aiExamples",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				namePlaceholder: {
+					classPropertyName: "namePlaceholder",
+					publicName: "namePlaceholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				subjectPlaceholder: {
+					classPropertyName: "subjectPlaceholder",
+					publicName: "subjectPlaceholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				backLabel: {
+					classPropertyName: "backLabel",
+					publicName: "backLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				createLabel: {
+					classPropertyName: "createLabel",
+					publicName: "createLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editLabel: {
+					classPropertyName: "editLabel",
+					publicName: "editLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				systemNote: {
+					classPropertyName: "systemNote",
+					publicName: "systemNote",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				readOnlyNote: {
+					classPropertyName: "readOnlyNote",
+					publicName: "readOnlyNote",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				idPrefix: {
+					classPropertyName: "idPrefix",
+					publicName: "idPrefix",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxBodyLength: {
+					classPropertyName: "maxBodyLength",
+					publicName: "maxBodyLength",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxTextLength: {
+					classPropertyName: "maxTextLength",
+					publicName: "maxTextLength",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fullAccess: {
+					classPropertyName: "fullAccess",
+					publicName: "fullAccess",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				systemTemplate: {
+					classPropertyName: "systemTemplate",
+					publicName: "systemTemplate",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				aiEnabled: {
+					classPropertyName: "aiEnabled",
+					publicName: "aiEnabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testSendEnabled: {
+					classPropertyName: "testSendEnabled",
+					publicName: "testSendEnabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				videosEnabled: {
+					classPropertyName: "videosEnabled",
+					publicName: "videosEnabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				saving: {
+					classPropertyName: "saving",
+					publicName: "saving",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testSending: {
+					classPropertyName: "testSending",
+					publicName: "testSending",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				aiGenerating: {
+					classPropertyName: "aiGenerating",
+					publicName: "aiGenerating",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				videos: {
+					classPropertyName: "videos",
+					publicName: "videos",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				videosLoading: {
+					classPropertyName: "videosLoading",
+					publicName: "videosLoading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				videoDefaults: {
+					classPropertyName: "videoDefaults",
+					publicName: "videoDefaults",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				videoLink: {
+					classPropertyName: "videoLink",
+					publicName: "videoLink",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				noVideosHint: {
+					classPropertyName: "noVideosHint",
+					publicName: "noVideosHint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				back: "back",
+				save: "save",
+				testSend: "testSend",
+				aiGenerate: "aiGenerate",
+				videosRequested: "videosRequested",
+				useAsMine: "useAsMine"
+			},
+			viewQueries: [{
+				propertyName: "blockEditors",
+				predicate: ["blockEditor"],
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "colorInputRef",
+				first: true,
+				predicate: ["colorInput"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div class="editor-page">
+      <!-- Top Bar -->
+      <div class="editor-topbar">
+        <div class="topbar-left">
+          <ui-button variant="ghost" size="sm" ariaLabel="Go back" (click)="back.emit()">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
+          </ui-button>
+          <nav class="breadcrumb" aria-label="Breadcrumb">
+            <a href="#" (click)="$event.preventDefault(); back.emit()">{{ backLabel() }}</a>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+            <span>{{ isNew() ? createLabel() : editLabel() }}</span>
+          </nav>
+        </div>
+        <div class="topbar-right">
+          @if (canWrite() && testSendEnabled()) {
+            <ui-button variant="secondary" size="sm" (click)="openTestSendDialog()">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+              Test Send
+            </ui-button>
+          }
+          <ui-button variant="primary" size="sm" [loading]="saving()" [disabled]="saveDisabled()" (click)="onSave()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+            Save Template
+          </ui-button>
+        </div>
+      </div>
+
+      @if (systemTemplate()) {
+        <div class="readonly-note system-note" role="note" data-testid="editor-system-note">
+          <span>{{ systemNote() }}</span>
+          @if (canCopySystem()) {
+            <ui-button variant="secondary" size="sm" data-testid="editor-use-as-mine" (click)="useAsMine.emit()">Use as My Template</ui-button>
+          }
+        </div>
+      } @else if (!canWrite()) {
+        <p class="readonly-note" role="note" data-testid="editor-readonly-note">{{ readOnlyNote() }}</p>
+      }
+
+      <!-- 3-Column Layout -->
+      <div class="editor-body">
+        <!-- LEFT PANEL: Details -->
+        <aside class="panel-left" aria-label="Template details">
+          <h3 class="panel-title">Details</h3>
+
+          <div class="form-field">
+            <ui-text-input label="Name" [required]="true" [(ngModel)]="name" [readonly]="!canWrite()" [maxlength]="maxTextLength()"
+              [placeholder]="namePlaceholder()" [error]="nameError()" />
+          </div>
+
+          <div class="form-field">
+            <ui-text-input label="Subject" [required]="true" [(ngModel)]="subject" [readonly]="!canWrite()" [maxlength]="maxTextLength()"
+              [placeholder]="subjectPlaceholder()" [error]="subjectError()">
+              @if (canWrite()) {
+                <span uiLabelEnd><ng-content select="[uiSubjectAction]" /></span>
+              }
+            </ui-text-input>
+          </div>
+
+          <div class="form-field">
+            <ui-select label="Category" [options]="categories()" [placeholder]="categoryPlaceholder()" [(ngModel)]="category" [disabled]="!canWrite()" />
+          </div>
+
+          <ui-checkbox label="Use this template all year" [(checked)]="useAllYear" [disabled]="!canWrite()" />
+
+          @if (!useAllYear()) {
+            <div class="form-row-dates">
+              <ui-date-input label="Active From" [(ngModel)]="activeFrom" [disabled]="!canWrite()" />
+              <ui-date-input label="Active To" [(ngModel)]="activeTo" [disabled]="!canWrite()" [min]="activeFrom()" [error]="datesError()" />
+            </div>
+          }
+
+          <!-- Assignments -->
+          @if (assignmentOptions().length > 0) {
+            <div class="assignments-section">
+              <h4 class="section-title">Assignments</h4>
+              <p class="section-desc">{{ assignmentsDescription() }}</p>
+              <ui-search-input placeholder="Search..." ariaLabel="Search assignments" [(value)]="assignmentSearch" />
+              <div class="assignment-list">
+                @for (item of filteredAssignments(); track item.key) {
+                  <div class="assignment-item" [class.assignment-readonly]="!canWrite()" [attr.role]="canWrite() ? 'button' : null" [attr.tabindex]="canWrite() ? 0 : null"
+                       [attr.aria-label]="canWrite() ? 'Configure ' + item.name : null"
+                       (click)="openAssignmentConfig(item)" (keydown.enter)="openAssignmentConfig(item); $event.preventDefault()" (keydown.space)="openAssignmentConfig(item); $event.preventDefault()">
+                    <div class="assignment-text">
+                      <strong>{{ item.name }}</strong>
+                      <span>{{ item.description }}</span>
+                    </div>
+                    <div class="assignment-channels">
+                      <span class="channel-badge" [class.active]="item.email" role="img" [attr.aria-label]="'Email ' + (item.email ? 'on' : 'off')">
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+                      </span>
+                      <span class="channel-badge" [class.active]="item.text" [class.disabled]="!textEnabled()" role="img" [attr.aria-label]="'Text ' + (item.text ? 'on' : 'off')">
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                      </span>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </aside>
+
+        <!-- CENTER: Editor -->
+        <main class="panel-center">
+          <div class="editor-tabs" role="tablist" aria-label="Editor view">
+            <button type="button" class="editor-tab" role="tab" [class.active]="activeEditorTab() === 'edit'" [attr.aria-selected]="activeEditorTab() === 'edit'" (click)="setEditorTab('edit')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
+              Edit
+            </button>
+            <button type="button" class="editor-tab" role="tab" [class.active]="activeEditorTab() === 'preview'" [attr.aria-selected]="activeEditorTab() === 'preview'" (click)="setEditorTab('preview')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+              Preview
+            </button>
+            <button type="button" class="editor-tab" role="tab" [class.active]="activeEditorTab() === 'mobile'" [attr.aria-selected]="activeEditorTab() === 'mobile'" (click)="setEditorTab('mobile')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+              Mobile
+            </button>
+          </div>
+
+          @if (activeEditorTab() === 'edit') {
+            @if (canWrite()) {
+              <!-- Toolbar row 1: mousedown preventDefault keeps focus (and the selection) in the editor -->
+              <div class="editor-toolbar" role="toolbar" aria-label="Text formatting" (mousedown)="preventFocusLoss($event)">
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Bold" uiTooltip="Bold" (click)="execCommand('bold')"><strong>B</strong></ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Italic" uiTooltip="Italic" (click)="execCommand('italic')"><em>I</em></ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Underline" uiTooltip="Underline" (click)="execCommand('underline')"><u>U</u></ui-button>
+                </div>
+                <div class="toolbar-group">
+                  @for (k of [headingKey()]; track k) {
+                    <ui-select class="toolbar-select" size="sm" ariaLabel="Heading level" [options]="headingOptions" ngModel="p"
+                      (mousedown)="saveSelection()" (ngModelChange)="onHeading($event)" />
+                  }
+                </div>
+                <div class="toolbar-group">
+                  @for (k of [sizeKey()]; track k) {
+                    <ui-select class="toolbar-select" size="sm" ariaLabel="Font size" placeholder="Size" [options]="fontSizeOptions" ngModel=""
+                      (mousedown)="saveSelection()" (ngModelChange)="onFontSize($event)" />
+                  }
+                </div>
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Align left" uiTooltip="Align Left" (click)="execCommand('justifyLeft')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Align center" uiTooltip="Align Center" (click)="execCommand('justifyCenter')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="10" x2="6" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="18" y1="18" x2="6" y2="18"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Align right" uiTooltip="Align Right" (click)="execCommand('justifyRight')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="21" y1="10" x2="7" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="21" y1="18" x2="7" y2="18"/></svg>
+                  </ui-button>
+                </div>
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Bulleted list" uiTooltip="Bulleted List" (click)="execCommand('insertUnorderedList')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Numbered list" uiTooltip="Numbered List" (click)="execCommand('insertOrderedList')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
+                  </ui-button>
+                </div>
+                <div class="toolbar-group">
+                  <!-- The browser's own colour dialog is the picker; a button opens it so the toolbar keeps one look. -->
+                  <input #colorInput type="color" class="hidden-color-input" aria-label="Text color" tabindex="-1" [value]="currentColor()" (change)="applyTextColor($any($event.target).value)" (mousedown)="$event.stopPropagation()" />
+                  <ui-button variant="icon" size="sm" ariaLabel="Text color" uiTooltip="Text Color" (mousedown)="openColorPicker()">
+                    <span class="color-indicator">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><text y="20" font-size="20" font-weight="700">A</text></svg>
+                      <span class="color-bar" [style.background]="currentColor()"></span>
+                    </span>
+                  </ui-button>
+                </div>
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Insert link" uiTooltip="Insert Link" (mousedown)="saveSelection()" (click)="openLinkDialog()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Insert image" uiTooltip="Insert Image" (mousedown)="saveSelection()" (click)="openImageDialog()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                  </ui-button>
+                </div>
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Undo" uiTooltip="Undo" (click)="execCommand('undo')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6.69 3L3 13"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Redo" uiTooltip="Redo" (click)="execCommand('redo')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6.69 3L21 13"/></svg>
+                  </ui-button>
+                </div>
+              </div>
+
+              <!-- Toolbar row 2: block spacing + AI -->
+              <div class="toolbar-row-2">
+                <div class="toolbar-group" (mousedown)="preventFocusLoss($event)">
+                  <span class="toolbar-label" id="tpl-spacing-label">Block spacing</span>
+                  <ui-select class="toolbar-select" size="sm" ariaLabel="Block spacing" [options]="spacingOptions" [ngModel]="blockSpacing()" (ngModelChange)="applySpacing($event)" />
+                </div>
+                @if (aiEnabled()) {
+                  <ui-button variant="secondary" size="sm" (click)="openAiPanel()">
+                    <span class="ai-dot" aria-hidden="true"></span>
+                    Generate with AI
+                  </ui-button>
+                }
+              </div>
+            }
+
+            <!-- Link dialog (inline popover) -->
+            @if (canWrite() && showLinkDialog()) {
+              <div class="link-dialog" role="group" aria-label="Insert link">
+                <div class="link-dialog-inner">
+                  <span class="link-dialog-title">Insert Link</span>
+                  <ui-text-input class="link-dialog-input" ariaLabel="Link address" placeholder="https://example.com" [(ngModel)]="linkUrl" [error]="linkUrlError()" (keydown.enter)="insertLink()" />
+                  @if (!linkTextFromSelection()) {
+                    <ui-text-input class="link-dialog-input" ariaLabel="Link text" placeholder="Link text (optional)" [(ngModel)]="linkText" (keydown.enter)="insertLink()" />
+                  }
+                  <div class="link-dialog-actions">
+                    <ui-button variant="secondary" size="sm" (click)="showLinkDialog.set(false)">Cancel</ui-button>
+                    <ui-button variant="primary" size="sm" [disabled]="!canInsertLink()" (click)="insertLink()">Insert</ui-button>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <!-- Image URL dialog -->
+            @if (canWrite() && showImageDialog()) {
+              <div class="link-dialog" role="group" aria-label="Insert image">
+                <div class="link-dialog-inner">
+                  <span class="link-dialog-title">Insert Image</span>
+                  <ui-text-input class="link-dialog-input" ariaLabel="Image address" placeholder="https://example.com/image.jpg" [(ngModel)]="imageUrl" [error]="imageUrlError()" (keydown.enter)="insertImageFromUrl()" />
+                  <ui-text-input class="link-dialog-input" ariaLabel="Image alt text" placeholder="Alt text (optional)" [(ngModel)]="imageAlt" (keydown.enter)="insertImageFromUrl()" />
+                  <div class="link-dialog-actions">
+                    <ui-button variant="secondary" size="sm" (click)="showImageDialog.set(false)">Cancel</ui-button>
+                    <ui-button variant="primary" size="sm" [disabled]="!canInsertImage()" (click)="insertImageFromUrl()">Insert</ui-button>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <ui-error [errorId]="idPrefix() + '-body-error'" [message]="bodyError()" />
+
+            <!-- Block Canvas with DnD -->
+            <div class="blocks-canvas" (dragover)="onCanvasDragOver($event)" (drop)="onDropZoneDrop($event, blocks().length)">
+              <!-- Initial drop zone (before first block) -->
+              <div class="drop-zone" [class.active]="dragOverIndex() === 0" (dragover)="onDropZoneDragOver($event, 0)" (dragleave)="onDropZoneLeave()" (drop)="onDropZoneDrop($event, 0)">
+                <span class="drop-zone-label">Drop here</span>
+              </div>
+
+              @for (block of blocks(); track block.id; let i = $index) {
+                <div class="block-wrapper" #blockWrapper [class.selected]="selectedBlockId() === block.id" [class.dragging]="dragFromCanvas() === i" (dragend)="onBlockDragEnd()">
+                  @if (canWrite()) {
+                    <!-- Only the handle is draggable: a draggable ancestor of the contenteditable breaks text selection in Firefox / Safari. Move up / down below are the keyboard and touch alternative. -->
+                    <div class="block-drag-handle" title="Drag to reorder" draggable="true" (dragstart)="onBlockDragStart($event, i, blockWrapper)">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
+                    </div>
+                  }
+
+                  <!-- Block content (contenteditable, initialised ONCE after render so Angular never rewrites it and the caret never jumps) -->
+                  <div #blockEditor class="block-content" role="textbox" aria-multiline="true" [attr.aria-label]="'Email block ' + (i + 1)"
+                    [attr.data-block-id]="block.id" [attr.contenteditable]="canWrite() ? 'true' : 'false'"
+                    (input)="onBlockInput($event, block)" (beforeinput)="onBlockBeforeInput($any($event))" (focus)="onBlockFocus(block)" (click)="selectedBlockId.set(block.id)"></div>
+
+                  @if (canWrite()) {
+                    <div class="block-controls">
+                      <ui-button variant="icon" size="xs" ariaLabel="Move block up" uiTooltip="Move up" [disabled]="i === 0" (mousedown)="preventFocusLoss($event)" (click)="moveBlock(i, -1)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M18 15l-6-6-6 6"/></svg>
+                      </ui-button>
+                      <ui-button variant="icon" size="xs" ariaLabel="Move block down" uiTooltip="Move down" [disabled]="i === blocks().length - 1" (mousedown)="preventFocusLoss($event)" (click)="moveBlock(i, 1)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
+                      </ui-button>
+                      <ui-button variant="icon" size="xs" ariaLabel="Duplicate block" uiTooltip="Duplicate" (mousedown)="preventFocusLoss($event)" (click)="duplicateBlock(i)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                      </ui-button>
+                      <ui-button variant="icon-danger" size="xs" ariaLabel="Delete block" uiTooltip="Delete block" (mousedown)="preventFocusLoss($event)" (click)="deleteBlock(i)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
+                      </ui-button>
+                    </div>
+                  }
+                </div>
+
+                <!-- Drop zone after each block -->
+                <div class="drop-zone" [class.active]="dragOverIndex() === i + 1" (dragover)="onDropZoneDragOver($event, i + 1)" (dragleave)="onDropZoneLeave()" (drop)="onDropZoneDrop($event, i + 1)">
+                  <span class="drop-zone-label">Drop here</span>
+                </div>
+              }
+
+              @if (canWrite()) {
+                <button type="button" class="add-block-btn" (click)="addBlock('text-block')">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                  Add Block
+                </button>
+              }
+            </div>
+          }
+
+          @if (activeEditorTab() === 'preview') {
+            <div class="preview-frame">
+              <div class="preview-content" [innerHTML]="previewHtml()"></div>
+            </div>
+          }
+
+          @if (activeEditorTab() === 'mobile') {
+            <div class="preview-frame mobile">
+              <div class="mobile-shell">
+                <div class="preview-content" [innerHTML]="previewHtml()"></div>
+              </div>
+            </div>
+          }
+        </main>
+
+        <!-- RIGHT PANEL: Blocks, Variables, Video -->
+        <aside class="panel-right" aria-label="Blocks, variables and video">
+          @if (!canWrite()) {
+            <div class="right-panel-body" data-testid="tpl-readonly-tools-note">
+              <h4 class="right-section-title">Read only</h4>
+              <p class="right-section-hint">Blocks, variables and videos can only be added to a template you can edit.</p>
+            </div>
+          } @else {
+            <div class="right-tabs" role="tablist" aria-label="Right panel sections">
+              <button type="button" class="right-tab" role="tab" [class.active]="activeRightTab() === 'blocks'" [attr.aria-selected]="activeRightTab() === 'blocks'" (click)="activeRightTab.set('blocks')">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+                Blocks
+              </button>
+              <button type="button" class="right-tab" role="tab" [class.active]="activeRightTab() === 'variables'" [attr.aria-selected]="activeRightTab() === 'variables'" (click)="activeRightTab.set('variables')">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 3v18M3 12h18"/></svg>
+                Variables
+              </button>
+              @if (videosEnabled()) {
+                <button type="button" class="right-tab" role="tab" [class.active]="activeRightTab() === 'video'" [attr.aria-selected]="activeRightTab() === 'video'" (click)="openVideoTab()">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
+                  Video
+                </button>
+              }
+            </div>
+
+            @if (activeRightTab() === 'blocks') {
+              <div class="right-panel-body">
+                <h4 class="right-section-title">Content Blocks</h4>
+                <p class="right-section-desc">Click to insert or drag into the editor.</p>
+                <ui-search-input placeholder="Search blocks..." ariaLabel="Search blocks" [(value)]="blockSearch" />
+
+                @for (group of filteredBlockGroups(); track group.name) {
+                  <div class="block-group">
+                    <button type="button" class="block-group-header" [attr.aria-expanded]="isOpen('b:' + group.name)" (click)="toggleGroup('b:' + group.name)">
+                      <svg class="chevron" [class.expanded]="isOpen('b:' + group.name)" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+                      <span>{{ group.name }}</span>
+                      <span class="block-count">{{ group.blocks.length }}</span>
+                    </button>
+                    @if (isOpen('b:' + group.name)) {
+                      <div class="block-list">
+                        @for (block of group.blocks; track block.key) {
+                          <!-- A div, not a button: Firefox does not start a drag from a <button>. Role, tabindex and Enter / Space keep it a keyboard control; a click inserts the block. -->
+                          <div role="button" tabindex="0" class="block-item" draggable="true" [attr.aria-label]="'Insert ' + block.label"
+                            (dragstart)="onPaletteDragStart($event, block)" (dragend)="onBlockDragEnd()" (click)="insertBlock(block)"
+                            (keydown.enter)="insertBlock(block); $event.preventDefault()" (keydown.space)="insertBlock(block); $event.preventDefault()">
+                            <svg class="block-item-drag" width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
+                            {{ block.label }}
+                          </div>
+                        }
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            @if (activeRightTab() === 'variables') {
+              <div class="right-panel-body">
+                <h4 class="right-section-title">Template Variables</h4>
+                <p class="right-section-desc">Click a variable to insert it at the cursor position.</p>
+
+                @for (group of variableGroups(); track group.name) {
+                  <div class="block-group">
+                    <button type="button" class="block-group-header" [attr.aria-expanded]="isOpen('v:' + group.name)" (click)="toggleGroup('v:' + group.name)">
+                      <svg class="chevron" [class.expanded]="isOpen('v:' + group.name)" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+                      <span>{{ group.name }}</span>
+                      <span class="block-count">{{ group.variables.length }}</span>
+                    </button>
+                    @if (isOpen('v:' + group.name)) {
+                      <div class="variable-list">
+                        @for (v of group.variables; track v.key) {
+                          <button type="button" class="variable-item" (mousedown)="saveSelection()" (click)="insertVariable(v)">
+                            <span class="var-tag">{{ '{{' + v.key + '}}' }}</span>
+                            <span class="var-label">{{ v.label }}</span>
+                            <span class="var-example">{{ v.example }}</span>
+                          </button>
+                        }
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            @if (activeRightTab() === 'video' && videosEnabled()) {
+              <div class="right-panel-body video-library-panel">
+                <h4 class="right-section-title">Video Library</h4>
+                <p class="right-section-hint">Click a video to add it as a new block in your email.</p>
+
+                <div class="video-config-section">
+                  <ui-radio-group label="Playback" orientation="horizontal" [options]="playbackOptions" [ngModel]="videoAutoplay() ? 'autoplay' : 'click'" (ngModelChange)="videoAutoplay.set($event === 'autoplay')" />
+                </div>
+                <div class="video-config-section">
+                  <ui-text-input label="Caption" placeholder="e.g. Click to watch my video for you" [maxlength]="200" [(ngModel)]="videoCaption" />
+                </div>
+                <div class="video-config-section">
+                  <ui-select label="Call-to-Action" [options]="ctaTypeOptions" [(ngModel)]="videoCtaType" />
+                  @if (videoCtaType()) {
+                    <ui-text-input ariaLabel="Call-to-action address" type="url" placeholder="https://..." [(ngModel)]="videoCtaUrl" />
+                    <ui-text-input ariaLabel="Call-to-action button label" placeholder="Button label" [maxlength]="100" [(ngModel)]="videoCtaLabel" />
+                  }
+                </div>
+                <div class="video-config-section">
+                  <ui-checkbox label="Hide Reactions" [(checked)]="videoHideReactions" />
+                </div>
+
+                @if (videosLoading()) {
+                  <div class="video-lib-loading" role="status" aria-busy="true" aria-label="Loading videos">
+                    @for (n of [1, 2, 3]; track n) {
+                      <div class="video-lib-skeleton">
+                        <ui-skeleton [height]="40" width="56px" [radius]="6" />
+                        <div class="vls-info"><ui-skeleton [height]="10" width="75%" [radius]="5" /><ui-skeleton [height]="10" width="45%" [radius]="5" /></div>
+                      </div>
+                    }
+                  </div>
+                } @else if (videos().length === 0) {
+                  <div class="video-lib-empty">
+                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
+                    <p>No videos yet</p>
+                    <span>{{ noVideosHint() }}</span>
+                  </div>
+                } @else {
+                  <div class="video-lib-list">
+                    @for (video of videos(); track video.id) {
+                      <button type="button" class="video-lib-item" [class.selected]="video.id === videoId()" [attr.aria-pressed]="video.id === videoId()" (click)="insertVideo(video)">
+                        <span class="vli-thumb">
+                          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                          @if (video.durationSeconds) {
+                            <span class="vli-dur">{{ formatDuration(video.durationSeconds) }}</span>
+                          }
+                        </span>
+                        <span class="vli-info">
+                          <span class="vli-title">{{ video.title }}</span>
+                          <span class="vli-cat">{{ categoryLabel(video.category) }}</span>
+                        </span>
+                        @if (video.id === videoId()) {
+                          <svg class="vli-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
+                        }
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          }
+        </aside>
+      </div>
+    </div>
+
+    <!-- Test Send -->
+    <ui-side-panel [open]="showTestSendDialog()" title="Send Test Email" primaryLabel="Send Test" [primaryLoading]="testSending()" [primaryDisabled]="!canSendTest()"
+      (closed)="showTestSendDialog.set(false)" (primaryClick)="onTestSend()">
+      <p class="config-desc">Send this template to an email address to preview how it will look in an inbox.</p>
+      @if (!editingId()) {
+        <div class="test-save-note">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+          Save the template first before sending a test.
+        </div>
+      }
+      <div class="config-field config-field-mt">
+        <ui-text-input label="Recipient Email" type="email" placeholder="you@example.com" [(ngModel)]="testSendEmail" [error]="testEmailError()" (keydown.enter)="onTestSend()" />
+      </div>
+      @if (hasUnsavedChanges()) {
+        <div class="test-save-note" role="note" data-testid="test-unsaved-note">
+          You have unsaved changes. The test email sends the last saved version of this template.
+        </div>
+      }
+    </ui-side-panel>
+
+    <!-- AI Generate -->
+    <ui-side-panel [open]="showAiPanel()" title="Generate with AI" primaryLabel="Generate" [primaryLoading]="aiGenerating()" [primaryDisabled]="!canGenerate()"
+      (closed)="showAiPanel.set(false)" (primaryClick)="onAiGenerate()">
+      <p class="config-desc">Describe the email you want to write. The AI will generate professional content and add it as a new block.</p>
+      <div class="ai-prompt-examples">
+        <span class="ai-example-label">Try:</span>
+        @for (ex of aiExamples(); track ex) {
+          <ui-chip [label]="ex" size="sm" (select)="aiPrompt.set(ex)" />
+        }
+      </div>
+      <div class="config-field config-field-mt">
+        <ui-textarea-input label="What do you want to write?" [rows]="5" placeholder="e.g. A friendly follow-up email for a buyer who attended an open house last weekend" [(ngModel)]="aiPrompt" />
+      </div>
+    </ui-side-panel>
+
+    <!-- Assignment config -->
+    <ui-side-panel [wide]="true" [open]="showAssignmentConfig()" [title]="configTarget()?.name || 'Configure Automation'" primaryLabel="Save Configuration"
+      [primaryDisabled]="!configEmail() && !configText()" (closed)="showAssignmentConfig.set(false)" (primaryClick)="saveAssignmentConfig()">
+      @if (configTarget(); as target) {
+        <p class="config-desc">{{ target.description }}</p>
+        <hr class="config-divider" />
+        <div class="config-section">
+          <span class="config-section-label">EMAIL TEMPLATE</span>
+          <div class="config-field">
+            <span class="config-label">Assigned Template</span>
+            <div class="config-readonly">{{ name() || 'Current template' }}</div>
+            <span class="config-hint">This template will be used when this automation is triggered.</span>
+          </div>
+        </div>
+        <hr class="config-divider" />
+        <div class="config-section">
+          <span class="config-section-label">CHANNELS <span class="required" aria-hidden="true">*</span></span>
+          <ui-checkbox label="Email" [(checked)]="configEmail" />
+          <ui-checkbox label="Text (SMS)" [(checked)]="configText" [disabled]="!textEnabled()" [hint]="textEnabled() ? '' : '(not enabled)'" />
+        </div>
+      }
+    </ui-side-panel>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.required{color:#ef4444;font-weight:400}.editor-page{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#f8fafc;overflow:hidden}.editor-topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 24px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0}.topbar-left{display:flex;align-items:center;gap:8px;min-width:0}.topbar-right{display:flex;align-items:center;gap:8px}.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.9375rem;font-weight:700;color:#1e293b;min-width:0}.breadcrumb a{color:#1e293b;text-decoration:none;cursor:pointer}.breadcrumb a:hover{color:#3b82f6}.breadcrumb svg{color:#94a3b8;flex-shrink:0}.breadcrumb span{color:#64748b;font-weight:500}.readonly-note{margin:0;padding:8px 16px;font-size:.8125rem;color:#92400e;background:#fffbeb;border-bottom:1px solid #fde68a}.readonly-note.system-note{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.editor-body{display:grid;grid-template-columns:340px minmax(0,1fr) 300px;flex:1;min-height:0;overflow:hidden}.panel-left{background:#fff;border-right:1px solid #e2e8f0;padding:24px;overflow-y:auto}.panel-title{font-size:1.0625rem;font-weight:700;color:#1e293b;margin:0 0 20px}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-row-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.assignments-section{border-top:1px solid #e2e8f0;padding-top:20px;margin-top:16px}.section-title{font-size:.9375rem;font-weight:700;color:#1e293b;margin:0 0 6px}.section-desc{font-size:.8125rem;color:#64748b;line-height:1.5;margin:0 0 12px}.assignment-list{max-height:340px;overflow-y:auto;margin-top:12px;border:1px solid #e2e8f0;border-radius:8px}.assignment-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:background .1s}.assignment-item:last-child{border-bottom:none}.assignment-item:hover{background:#f8fafc}.assignment-item:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.assignment-item.assignment-readonly{cursor:default}.assignment-item.assignment-readonly:hover{background:transparent}.assignment-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.assignment-text strong{font-size:.8125rem;color:#1e293b}.assignment-text span{font-size:.75rem;color:#64748b}.assignment-channels{display:flex;gap:4px;flex-shrink:0}.channel-badge{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:#f1f5f9;color:#94a3b8;transition:all .15s}.channel-badge.active{background:#3b82f6;color:#fff}.channel-badge.disabled{opacity:.4;cursor:not-allowed}.config-desc{font-size:.875rem;color:#64748b;line-height:1.5;margin:0}.config-divider{border:none;border-top:1px solid #e2e8f0;margin:20px 0}.config-section{display:flex;flex-direction:column;gap:12px}.config-section-label{font-size:.6875rem;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:.04em}.config-field{display:flex;flex-direction:column;gap:6px}.config-field-mt{margin-top:16px}.config-label{font-size:.8125rem;font-weight:600;color:#1e293b}.config-readonly{padding:9px 12px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;font-size:.875rem;color:#1e293b}.config-hint{font-size:.75rem;color:#64748b}.test-save-note{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;font-size:.8125rem;color:#92400e;margin-top:12px}.test-save-note svg{flex-shrink:0}.ai-prompt-examples{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}.ai-example-label{font-size:.75rem;color:#64748b;font-weight:600}.panel-center{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.editor-tabs{display:flex;gap:2px;padding:12px 20px 0;background:#fff;border-bottom:1px solid #e2e8f0;overflow-x:auto;-webkit-overflow-scrolling:touch}.editor-tab{display:flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid #e2e8f0;border-bottom:none;border-radius:8px 8px 0 0;background:#f8fafc;font-size:.8125rem;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit;white-space:nowrap}.editor-tab:hover{background:#fff;color:#1e293b}.editor-tab.active{background:#eff6ff;color:#3b82f6;border-color:#93c5fd}.editor-tab:focus-visible,.right-tab:focus-visible,.block-group-header:focus-visible,.variable-item:focus-visible,.add-block-btn:focus-visible,.block-item:focus-visible,.video-lib-item:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.editor-toolbar{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border-bottom:1px solid #e2e8f0;flex-wrap:wrap}.toolbar-row-2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 20px;background:#fff;border-bottom:1px solid #e2e8f0}.toolbar-group{display:flex;align-items:center;gap:2px;padding-right:8px;border-right:1px solid #e2e8f0}.toolbar-group:last-child{border-right:none;padding-right:0}.toolbar-select{display:block;min-width:96px}.toolbar-label{font-size:.75rem;font-weight:600;color:#64748b;white-space:nowrap;margin-right:6px}.ai-dot{width:8px;height:8px;border-radius:50%;background:#3b82f6;display:inline-block;margin-right:6px}.hidden-color-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;border:none;padding:0}.color-indicator{display:flex;flex-direction:column;align-items:center;gap:2px;color:#475569}.color-bar{display:block;width:16px;height:3px;border-radius:2px;border:1px solid rgba(0,0,0,.1)}.link-dialog{background:#fff;border-bottom:1px solid #e2e8f0;padding:12px 20px}.link-dialog-inner{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}.link-dialog-title{font-size:.8125rem;font-weight:700;color:#1e293b;white-space:nowrap;padding-top:10px}.link-dialog-input{display:block;width:240px;max-width:100%}.link-dialog-actions{display:flex;gap:6px}.preview-frame{flex:1;display:flex;justify-content:center;padding:24px;overflow-y:auto;background:#f1f5f9}.preview-frame.mobile{align-items:flex-start}.preview-content{max-width:600px;width:100%;box-sizing:border-box;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:32px;min-height:400px;font-size:.9375rem;line-height:1.6;color:#1e293b;overflow-wrap:anywhere}.preview-content p{margin:0 0 8px}.mobile-shell{width:375px;max-width:100%;box-sizing:border-box;min-height:600px;border:2px solid #1e293b;border-radius:24px;padding:40px 12px 24px;background:#fff;box-shadow:0 8px 32px #0000001f}.mobile-shell .preview-content{border:none;border-radius:0;padding:16px;max-width:100%}.blocks-canvas{flex:1;padding:16px 20px 24px;overflow-y:auto;background:#f1f5f9;display:flex;flex-direction:column}.block-wrapper{position:relative;display:flex;align-items:flex-start;background:#fff;border:2px solid transparent;border-radius:8px;transition:border-color .15s,box-shadow .15s}.block-wrapper:hover,.block-wrapper.selected,.block-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.block-wrapper:hover .block-drag-handle,.block-wrapper.selected .block-drag-handle,.block-wrapper:focus-within .block-drag-handle{opacity:1}.block-wrapper:hover .block-controls,.block-wrapper.selected .block-controls,.block-wrapper:focus-within .block-controls{opacity:1;pointer-events:all}.block-wrapper.dragging{opacity:.4}.block-drag-handle{flex-shrink:0;width:28px;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;opacity:0;transition:opacity .15s;cursor:grab;color:#94a3b8}.block-drag-handle:active{cursor:grabbing}.block-content{flex:1;min-width:0;padding:12px 16px;outline:none;font-size:.9375rem;color:#1e293b;line-height:1.6;min-height:48px;overflow-wrap:anywhere}.block-content:empty:before{content:\"Click to edit...\";color:#94a3b8;font-style:italic;pointer-events:none}.block-content p{margin:0 0 8px}.block-content p:last-child{margin:0}.block-content h1,.block-content h2,.block-content h3{margin:8px 0 6px;color:#1e293b}.block-content a{color:#3b82f6}.block-content img{max-width:100%;border-radius:6px}.block-content ul,.block-content ol{padding-left:20px;margin:0 0 8px}.block-controls{position:absolute;top:6px;right:6px;display:flex;gap:2px;opacity:0;pointer-events:none;transition:opacity .15s;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:3px;box-shadow:0 2px 6px #00000014}@media(hover:none){.block-wrapper.selected .block-controls{opacity:1;pointer-events:all}}.drop-zone{height:8px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:height .15s,background .15s;position:relative}.drop-zone-label{font-size:.75rem;font-weight:600;color:#3b82f6;opacity:0;transition:opacity .1s}.drop-zone.active{height:40px;background:#3b82f614;border:2px dashed #3b82f6}.drop-zone.active .drop-zone-label{opacity:1}.add-block-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:12px;margin-top:8px;border:2px dashed #e2e8f0;border-radius:8px;background:none;font-size:.875rem;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s}.add-block-btn:hover{border-color:#3b82f6;color:#3b82f6;background:#3b82f60a}.panel-right{background:#fff;border-left:1px solid #e2e8f0;display:flex;flex-direction:column;min-height:0;min-width:0}.right-tabs{display:flex;border-bottom:1px solid #e2e8f0}.right-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;min-height:44px;border:none;background:none;font-size:.8125rem;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent}.right-tab:hover{color:#1e293b}.right-tab.active{color:#3b82f6;background:#eff6ff;border-bottom-color:#3b82f6}.right-panel-body{flex:1;padding:20px;overflow-y:auto}.right-section-title{font-size:.9375rem;font-weight:700;color:#1e293b;margin:0 0 12px}.right-section-desc{font-size:.8125rem;color:#64748b;margin:0 0 16px;line-height:1.5}.right-section-hint{font-size:.8125rem;color:#64748b;margin:0 0 12px;line-height:1.5}.block-group{border-bottom:1px solid #f1f5f9}.block-group-header{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:12px 0;border:none;background:none;font-size:.875rem;font-weight:600;color:#1e293b;cursor:pointer;font-family:inherit;text-align:left}.block-group-header .chevron{transition:transform .2s;color:#94a3b8}.block-group-header .chevron.expanded{transform:rotate(90deg)}.block-group-header span:nth-of-type(1){flex:1}.block-count{font-size:.75rem;font-weight:600;color:#64748b;background:#f1f5f9;padding:2px 8px;border-radius:10px;margin-left:auto}.block-list,.variable-list{display:flex;flex-direction:column;gap:2px;padding-bottom:8px}.block-item{display:flex;align-items:center;gap:6px;box-sizing:border-box;width:100%;min-height:44px;padding:8px 12px 8px 28px;font-size:.8125rem;color:#64748b;cursor:pointer;text-align:left;border-radius:4px;font-family:inherit;-webkit-user-select:none;user-select:none}.block-item:hover{background:#f8fafc;color:#1e293b}.block-item-drag{color:#cbd5e1;flex-shrink:0;cursor:grab}.variable-item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;min-height:44px;padding:8px 12px 8px 28px;border:none;background:none;cursor:pointer;text-align:left;border-radius:4px;font-family:inherit}.variable-item:hover{background:#f8fafc}.var-tag{font-size:.75rem;font-weight:600;color:#3b82f6;background:#3b82f614;padding:2px 6px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.var-label{font-size:.8125rem;color:#1e293b}.var-example{font-size:.75rem;color:#64748b;overflow-wrap:anywhere}.video-library-panel{padding:0}.video-library-panel .right-section-title,.video-library-panel .right-section-hint{padding:0 16px}.video-library-panel .right-section-title{padding-top:16px}.video-config-section{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-bottom:1px solid #f1f5f9}.video-config-section:last-of-type{border-bottom:none}.video-lib-list{display:flex;flex-direction:column;gap:2px;padding:8px 8px 16px}.video-lib-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;text-align:left;font-family:inherit;transition:background .15s,border-color .15s}.video-lib-item:hover{background:#f8fafc;border-color:#e2e8f0}.video-lib-item.selected{background:#eff6ff;border-color:#93c5fd}.vli-thumb{position:relative;flex-shrink:0;width:56px;height:40px;border-radius:6px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);display:flex;align-items:center;justify-content:center}.vli-dur{position:absolute;bottom:2px;right:3px;font-size:.625rem;font-weight:600;color:#fff;background:#000000a6;padding:1px 4px;border-radius:3px}.vli-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.vli-title{font-size:.8125rem;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vli-cat{font-size:.75rem;color:#64748b}.vli-check{flex-shrink:0}.video-lib-empty{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;gap:8px}.video-lib-empty p{font-size:.875rem;font-weight:500;color:#475569;margin:0}.video-lib-empty span{font-size:.8125rem;color:#64748b}.video-lib-loading{padding:8px}.video-lib-skeleton{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:4px}.vls-info{flex:1;display:flex;flex-direction:column;gap:6px}@media(max-width:1200px){.editor-body{grid-template-columns:280px minmax(0,1fr) 260px}}@media(max-width:900px){.editor-page{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}.editor-body{display:flex;flex-direction:column;overflow:visible}.editor-topbar{padding:12px 16px}.panel-left{border-right:none;border-bottom:1px solid #e2e8f0;overflow:visible;padding:16px}.panel-center{overflow:visible;min-height:480px}.blocks-canvas{overflow:visible;min-height:320px}.panel-right{border-left:none;border-top:1px solid #e2e8f0}.right-panel-body{overflow:visible}.editor-toolbar,.toolbar-row-2,.link-dialog,.editor-tabs{padding-left:12px;padding-right:12px}.preview-frame{padding:12px}.preview-content{padding:16px}.form-row-dates{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.RequiredValidator,
+					selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",
+					inputs: ["required"]
+				},
+				{
+					kind: "directive",
+					type: i1.MaxLengthValidator,
+					selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+					inputs: ["maxlength"]
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				},
+				{
+					kind: "component",
+					type: CheckboxComponent,
+					selector: "ui-checkbox, ui-checkbox-group",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"testId",
+						"labelTestId",
+						"headingLevel",
+						"indeterminate",
+						"checked",
+						"options",
+						"legend",
+						"orientation",
+						"values",
+						"description",
+						"indent",
+						"required",
+						"requiredMessage",
+						"hint",
+						"error",
+						"showErrors",
+						"disabled"
+					],
+					outputs: [
+						"checkedChange",
+						"valuesChange",
+						"invalidChange"
+					]
+				},
+				{
+					kind: "component",
+					type: ChipComponent,
+					selector: "ui-chip",
+					inputs: [
+						"label",
+						"size",
+						"dismissible",
+						"active"
+					],
+					outputs: ["select", "dismiss"]
+				},
+				{
+					kind: "component",
+					type: DateInputComponent,
+					selector: "ui-date-input",
+					inputs: [
+						"label",
+						"required",
+						"min",
+						"max",
+						"hint",
+						"error",
+						"showErrors",
+						"disabled"
+					],
+					outputs: ["invalidChange", "valueChange"]
+				},
+				{
+					kind: "component",
+					type: ErrorComponent,
+					selector: "ui-error",
+					inputs: ["message", "errorId"]
+				},
+				{
+					kind: "component",
+					type: RadioGroupComponent,
+					selector: "ui-radio-group",
+					inputs: [
+						"label",
+						"options",
+						"required",
+						"hint",
+						"error",
+						"showErrors",
+						"orientation",
+						"name",
+						"disabled"
+					],
+					outputs: ["invalidChange"]
+				},
+				{
+					kind: "component",
+					type: SearchInputComponent,
+					selector: "ui-search-input",
+					inputs: [
+						"placeholder",
+						"ariaLabel",
+						"value",
+						"maxlength",
+						"endpoint",
+						"loading"
+					],
+					outputs: [
+						"valueChange",
+						"searchChange",
+						"filteredData"
+					]
+				},
+				{
+					kind: "component",
+					type: SelectComponent,
+					selector: "ui-select",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"placeholder",
+						"options",
+						"valueType",
+						"required",
+						"hint",
+						"error",
+						"showErrors",
+						"size",
+						"disabled"
+					],
+					outputs: ["invalidChange", "valueChange"]
+				},
+				{
+					kind: "component",
+					type: SidePanelComponent,
+					selector: "ui-side-panel",
+					inputs: [
+						"open",
+						"title",
+						"subtitle",
+						"wide",
+						"extraWide",
+						"cancelLabel",
+						"primaryLabel",
+						"primaryVariant",
+						"primaryLoading",
+						"primaryDisabled",
+						"cancelTestId",
+						"primaryTestId",
+						"returnFocusTo"
+					],
+					outputs: ["closed", "primaryClick"]
+				},
+				{
+					kind: "component",
+					type: SkeletonComponent,
+					selector: "ui-skeleton",
+					inputs: [
+						"height",
+						"width",
+						"radius",
+						"mb",
+						"ariaLabel"
+					]
+				},
+				{
+					kind: "component",
+					type: TextInputComponent,
+					selector: "ui-text-input",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"inputTestId",
+						"placeholder",
+						"prefix",
+						"revealable",
+						"passwordRequirements",
+						"passwordRules",
+						"type",
+						"maxlength",
+						"required",
+						"autocomplete",
+						"inputmode",
+						"readonly",
+						"hint",
+						"error",
+						"phoneFormat",
+						"min",
+						"max",
+						"maxDecimals",
+						"step",
+						"valueType",
+						"formatter",
+						"integer",
+						"showErrors",
+						"disabled"
+					],
+					outputs: [
+						"valueChange",
+						"focused",
+						"blurred",
+						"invalidChange"
+					]
+				},
+				{
+					kind: "component",
+					type: TextareaInputComponent,
+					selector: "ui-textarea-input",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"placeholder",
+						"rows",
+						"maxlength",
+						"required",
+						"readonly",
+						"hint",
+						"hintAsDescription",
+						"error",
+						"monospace",
+						"showErrors",
+						"disabled"
+					],
+					outputs: ["invalidChange"]
+				},
+				{
+					kind: "directive",
+					type: TooltipDirective,
+					selector: "[uiTooltip]",
+					inputs: ["uiTooltip", "tooltipPosition"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: EmailTemplateEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-email-template-editor",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				ButtonComponent,
+				CheckboxComponent,
+				ChipComponent,
+				DateInputComponent,
+				ErrorComponent,
+				RadioGroupComponent,
+				SearchInputComponent,
+				SelectComponent,
+				SidePanelComponent,
+				SkeletonComponent,
+				TextInputComponent,
+				TextareaInputComponent,
+				TooltipDirective
+			],
+			template: `
+    <div class="editor-page">
+      <!-- Top Bar -->
+      <div class="editor-topbar">
+        <div class="topbar-left">
+          <ui-button variant="ghost" size="sm" ariaLabel="Go back" (click)="back.emit()">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
+          </ui-button>
+          <nav class="breadcrumb" aria-label="Breadcrumb">
+            <a href="#" (click)="$event.preventDefault(); back.emit()">{{ backLabel() }}</a>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+            <span>{{ isNew() ? createLabel() : editLabel() }}</span>
+          </nav>
+        </div>
+        <div class="topbar-right">
+          @if (canWrite() && testSendEnabled()) {
+            <ui-button variant="secondary" size="sm" (click)="openTestSendDialog()">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+              Test Send
+            </ui-button>
+          }
+          <ui-button variant="primary" size="sm" [loading]="saving()" [disabled]="saveDisabled()" (click)="onSave()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+            Save Template
+          </ui-button>
+        </div>
+      </div>
+
+      @if (systemTemplate()) {
+        <div class="readonly-note system-note" role="note" data-testid="editor-system-note">
+          <span>{{ systemNote() }}</span>
+          @if (canCopySystem()) {
+            <ui-button variant="secondary" size="sm" data-testid="editor-use-as-mine" (click)="useAsMine.emit()">Use as My Template</ui-button>
+          }
+        </div>
+      } @else if (!canWrite()) {
+        <p class="readonly-note" role="note" data-testid="editor-readonly-note">{{ readOnlyNote() }}</p>
+      }
+
+      <!-- 3-Column Layout -->
+      <div class="editor-body">
+        <!-- LEFT PANEL: Details -->
+        <aside class="panel-left" aria-label="Template details">
+          <h3 class="panel-title">Details</h3>
+
+          <div class="form-field">
+            <ui-text-input label="Name" [required]="true" [(ngModel)]="name" [readonly]="!canWrite()" [maxlength]="maxTextLength()"
+              [placeholder]="namePlaceholder()" [error]="nameError()" />
+          </div>
+
+          <div class="form-field">
+            <ui-text-input label="Subject" [required]="true" [(ngModel)]="subject" [readonly]="!canWrite()" [maxlength]="maxTextLength()"
+              [placeholder]="subjectPlaceholder()" [error]="subjectError()">
+              @if (canWrite()) {
+                <span uiLabelEnd><ng-content select="[uiSubjectAction]" /></span>
+              }
+            </ui-text-input>
+          </div>
+
+          <div class="form-field">
+            <ui-select label="Category" [options]="categories()" [placeholder]="categoryPlaceholder()" [(ngModel)]="category" [disabled]="!canWrite()" />
+          </div>
+
+          <ui-checkbox label="Use this template all year" [(checked)]="useAllYear" [disabled]="!canWrite()" />
+
+          @if (!useAllYear()) {
+            <div class="form-row-dates">
+              <ui-date-input label="Active From" [(ngModel)]="activeFrom" [disabled]="!canWrite()" />
+              <ui-date-input label="Active To" [(ngModel)]="activeTo" [disabled]="!canWrite()" [min]="activeFrom()" [error]="datesError()" />
+            </div>
+          }
+
+          <!-- Assignments -->
+          @if (assignmentOptions().length > 0) {
+            <div class="assignments-section">
+              <h4 class="section-title">Assignments</h4>
+              <p class="section-desc">{{ assignmentsDescription() }}</p>
+              <ui-search-input placeholder="Search..." ariaLabel="Search assignments" [(value)]="assignmentSearch" />
+              <div class="assignment-list">
+                @for (item of filteredAssignments(); track item.key) {
+                  <div class="assignment-item" [class.assignment-readonly]="!canWrite()" [attr.role]="canWrite() ? 'button' : null" [attr.tabindex]="canWrite() ? 0 : null"
+                       [attr.aria-label]="canWrite() ? 'Configure ' + item.name : null"
+                       (click)="openAssignmentConfig(item)" (keydown.enter)="openAssignmentConfig(item); $event.preventDefault()" (keydown.space)="openAssignmentConfig(item); $event.preventDefault()">
+                    <div class="assignment-text">
+                      <strong>{{ item.name }}</strong>
+                      <span>{{ item.description }}</span>
+                    </div>
+                    <div class="assignment-channels">
+                      <span class="channel-badge" [class.active]="item.email" role="img" [attr.aria-label]="'Email ' + (item.email ? 'on' : 'off')">
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+                      </span>
+                      <span class="channel-badge" [class.active]="item.text" [class.disabled]="!textEnabled()" role="img" [attr.aria-label]="'Text ' + (item.text ? 'on' : 'off')">
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                      </span>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </aside>
+
+        <!-- CENTER: Editor -->
+        <main class="panel-center">
+          <div class="editor-tabs" role="tablist" aria-label="Editor view">
+            <button type="button" class="editor-tab" role="tab" [class.active]="activeEditorTab() === 'edit'" [attr.aria-selected]="activeEditorTab() === 'edit'" (click)="setEditorTab('edit')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
+              Edit
+            </button>
+            <button type="button" class="editor-tab" role="tab" [class.active]="activeEditorTab() === 'preview'" [attr.aria-selected]="activeEditorTab() === 'preview'" (click)="setEditorTab('preview')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+              Preview
+            </button>
+            <button type="button" class="editor-tab" role="tab" [class.active]="activeEditorTab() === 'mobile'" [attr.aria-selected]="activeEditorTab() === 'mobile'" (click)="setEditorTab('mobile')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+              Mobile
+            </button>
+          </div>
+
+          @if (activeEditorTab() === 'edit') {
+            @if (canWrite()) {
+              <!-- Toolbar row 1: mousedown preventDefault keeps focus (and the selection) in the editor -->
+              <div class="editor-toolbar" role="toolbar" aria-label="Text formatting" (mousedown)="preventFocusLoss($event)">
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Bold" uiTooltip="Bold" (click)="execCommand('bold')"><strong>B</strong></ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Italic" uiTooltip="Italic" (click)="execCommand('italic')"><em>I</em></ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Underline" uiTooltip="Underline" (click)="execCommand('underline')"><u>U</u></ui-button>
+                </div>
+                <div class="toolbar-group">
+                  @for (k of [headingKey()]; track k) {
+                    <ui-select class="toolbar-select" size="sm" ariaLabel="Heading level" [options]="headingOptions" ngModel="p"
+                      (mousedown)="saveSelection()" (ngModelChange)="onHeading($event)" />
+                  }
+                </div>
+                <div class="toolbar-group">
+                  @for (k of [sizeKey()]; track k) {
+                    <ui-select class="toolbar-select" size="sm" ariaLabel="Font size" placeholder="Size" [options]="fontSizeOptions" ngModel=""
+                      (mousedown)="saveSelection()" (ngModelChange)="onFontSize($event)" />
+                  }
+                </div>
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Align left" uiTooltip="Align Left" (click)="execCommand('justifyLeft')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Align center" uiTooltip="Align Center" (click)="execCommand('justifyCenter')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="10" x2="6" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="18" y1="18" x2="6" y2="18"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Align right" uiTooltip="Align Right" (click)="execCommand('justifyRight')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="21" y1="10" x2="7" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="21" y1="18" x2="7" y2="18"/></svg>
+                  </ui-button>
+                </div>
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Bulleted list" uiTooltip="Bulleted List" (click)="execCommand('insertUnorderedList')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Numbered list" uiTooltip="Numbered List" (click)="execCommand('insertOrderedList')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
+                  </ui-button>
+                </div>
+                <div class="toolbar-group">
+                  <!-- The browser's own colour dialog is the picker; a button opens it so the toolbar keeps one look. -->
+                  <input #colorInput type="color" class="hidden-color-input" aria-label="Text color" tabindex="-1" [value]="currentColor()" (change)="applyTextColor($any($event.target).value)" (mousedown)="$event.stopPropagation()" />
+                  <ui-button variant="icon" size="sm" ariaLabel="Text color" uiTooltip="Text Color" (mousedown)="openColorPicker()">
+                    <span class="color-indicator">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><text y="20" font-size="20" font-weight="700">A</text></svg>
+                      <span class="color-bar" [style.background]="currentColor()"></span>
+                    </span>
+                  </ui-button>
+                </div>
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Insert link" uiTooltip="Insert Link" (mousedown)="saveSelection()" (click)="openLinkDialog()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Insert image" uiTooltip="Insert Image" (mousedown)="saveSelection()" (click)="openImageDialog()">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                  </ui-button>
+                </div>
+                <div class="toolbar-group">
+                  <ui-button variant="icon" size="sm" ariaLabel="Undo" uiTooltip="Undo" (click)="execCommand('undo')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6.69 3L3 13"/></svg>
+                  </ui-button>
+                  <ui-button variant="icon" size="sm" ariaLabel="Redo" uiTooltip="Redo" (click)="execCommand('redo')">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6.69 3L21 13"/></svg>
+                  </ui-button>
+                </div>
+              </div>
+
+              <!-- Toolbar row 2: block spacing + AI -->
+              <div class="toolbar-row-2">
+                <div class="toolbar-group" (mousedown)="preventFocusLoss($event)">
+                  <span class="toolbar-label" id="tpl-spacing-label">Block spacing</span>
+                  <ui-select class="toolbar-select" size="sm" ariaLabel="Block spacing" [options]="spacingOptions" [ngModel]="blockSpacing()" (ngModelChange)="applySpacing($event)" />
+                </div>
+                @if (aiEnabled()) {
+                  <ui-button variant="secondary" size="sm" (click)="openAiPanel()">
+                    <span class="ai-dot" aria-hidden="true"></span>
+                    Generate with AI
+                  </ui-button>
+                }
+              </div>
+            }
+
+            <!-- Link dialog (inline popover) -->
+            @if (canWrite() && showLinkDialog()) {
+              <div class="link-dialog" role="group" aria-label="Insert link">
+                <div class="link-dialog-inner">
+                  <span class="link-dialog-title">Insert Link</span>
+                  <ui-text-input class="link-dialog-input" ariaLabel="Link address" placeholder="https://example.com" [(ngModel)]="linkUrl" [error]="linkUrlError()" (keydown.enter)="insertLink()" />
+                  @if (!linkTextFromSelection()) {
+                    <ui-text-input class="link-dialog-input" ariaLabel="Link text" placeholder="Link text (optional)" [(ngModel)]="linkText" (keydown.enter)="insertLink()" />
+                  }
+                  <div class="link-dialog-actions">
+                    <ui-button variant="secondary" size="sm" (click)="showLinkDialog.set(false)">Cancel</ui-button>
+                    <ui-button variant="primary" size="sm" [disabled]="!canInsertLink()" (click)="insertLink()">Insert</ui-button>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <!-- Image URL dialog -->
+            @if (canWrite() && showImageDialog()) {
+              <div class="link-dialog" role="group" aria-label="Insert image">
+                <div class="link-dialog-inner">
+                  <span class="link-dialog-title">Insert Image</span>
+                  <ui-text-input class="link-dialog-input" ariaLabel="Image address" placeholder="https://example.com/image.jpg" [(ngModel)]="imageUrl" [error]="imageUrlError()" (keydown.enter)="insertImageFromUrl()" />
+                  <ui-text-input class="link-dialog-input" ariaLabel="Image alt text" placeholder="Alt text (optional)" [(ngModel)]="imageAlt" (keydown.enter)="insertImageFromUrl()" />
+                  <div class="link-dialog-actions">
+                    <ui-button variant="secondary" size="sm" (click)="showImageDialog.set(false)">Cancel</ui-button>
+                    <ui-button variant="primary" size="sm" [disabled]="!canInsertImage()" (click)="insertImageFromUrl()">Insert</ui-button>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <ui-error [errorId]="idPrefix() + '-body-error'" [message]="bodyError()" />
+
+            <!-- Block Canvas with DnD -->
+            <div class="blocks-canvas" (dragover)="onCanvasDragOver($event)" (drop)="onDropZoneDrop($event, blocks().length)">
+              <!-- Initial drop zone (before first block) -->
+              <div class="drop-zone" [class.active]="dragOverIndex() === 0" (dragover)="onDropZoneDragOver($event, 0)" (dragleave)="onDropZoneLeave()" (drop)="onDropZoneDrop($event, 0)">
+                <span class="drop-zone-label">Drop here</span>
+              </div>
+
+              @for (block of blocks(); track block.id; let i = $index) {
+                <div class="block-wrapper" #blockWrapper [class.selected]="selectedBlockId() === block.id" [class.dragging]="dragFromCanvas() === i" (dragend)="onBlockDragEnd()">
+                  @if (canWrite()) {
+                    <!-- Only the handle is draggable: a draggable ancestor of the contenteditable breaks text selection in Firefox / Safari. Move up / down below are the keyboard and touch alternative. -->
+                    <div class="block-drag-handle" title="Drag to reorder" draggable="true" (dragstart)="onBlockDragStart($event, i, blockWrapper)">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
+                    </div>
+                  }
+
+                  <!-- Block content (contenteditable, initialised ONCE after render so Angular never rewrites it and the caret never jumps) -->
+                  <div #blockEditor class="block-content" role="textbox" aria-multiline="true" [attr.aria-label]="'Email block ' + (i + 1)"
+                    [attr.data-block-id]="block.id" [attr.contenteditable]="canWrite() ? 'true' : 'false'"
+                    (input)="onBlockInput($event, block)" (beforeinput)="onBlockBeforeInput($any($event))" (focus)="onBlockFocus(block)" (click)="selectedBlockId.set(block.id)"></div>
+
+                  @if (canWrite()) {
+                    <div class="block-controls">
+                      <ui-button variant="icon" size="xs" ariaLabel="Move block up" uiTooltip="Move up" [disabled]="i === 0" (mousedown)="preventFocusLoss($event)" (click)="moveBlock(i, -1)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M18 15l-6-6-6 6"/></svg>
+                      </ui-button>
+                      <ui-button variant="icon" size="xs" ariaLabel="Move block down" uiTooltip="Move down" [disabled]="i === blocks().length - 1" (mousedown)="preventFocusLoss($event)" (click)="moveBlock(i, 1)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
+                      </ui-button>
+                      <ui-button variant="icon" size="xs" ariaLabel="Duplicate block" uiTooltip="Duplicate" (mousedown)="preventFocusLoss($event)" (click)="duplicateBlock(i)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                      </ui-button>
+                      <ui-button variant="icon-danger" size="xs" ariaLabel="Delete block" uiTooltip="Delete block" (mousedown)="preventFocusLoss($event)" (click)="deleteBlock(i)">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
+                      </ui-button>
+                    </div>
+                  }
+                </div>
+
+                <!-- Drop zone after each block -->
+                <div class="drop-zone" [class.active]="dragOverIndex() === i + 1" (dragover)="onDropZoneDragOver($event, i + 1)" (dragleave)="onDropZoneLeave()" (drop)="onDropZoneDrop($event, i + 1)">
+                  <span class="drop-zone-label">Drop here</span>
+                </div>
+              }
+
+              @if (canWrite()) {
+                <button type="button" class="add-block-btn" (click)="addBlock('text-block')">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                  Add Block
+                </button>
+              }
+            </div>
+          }
+
+          @if (activeEditorTab() === 'preview') {
+            <div class="preview-frame">
+              <div class="preview-content" [innerHTML]="previewHtml()"></div>
+            </div>
+          }
+
+          @if (activeEditorTab() === 'mobile') {
+            <div class="preview-frame mobile">
+              <div class="mobile-shell">
+                <div class="preview-content" [innerHTML]="previewHtml()"></div>
+              </div>
+            </div>
+          }
+        </main>
+
+        <!-- RIGHT PANEL: Blocks, Variables, Video -->
+        <aside class="panel-right" aria-label="Blocks, variables and video">
+          @if (!canWrite()) {
+            <div class="right-panel-body" data-testid="tpl-readonly-tools-note">
+              <h4 class="right-section-title">Read only</h4>
+              <p class="right-section-hint">Blocks, variables and videos can only be added to a template you can edit.</p>
+            </div>
+          } @else {
+            <div class="right-tabs" role="tablist" aria-label="Right panel sections">
+              <button type="button" class="right-tab" role="tab" [class.active]="activeRightTab() === 'blocks'" [attr.aria-selected]="activeRightTab() === 'blocks'" (click)="activeRightTab.set('blocks')">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+                Blocks
+              </button>
+              <button type="button" class="right-tab" role="tab" [class.active]="activeRightTab() === 'variables'" [attr.aria-selected]="activeRightTab() === 'variables'" (click)="activeRightTab.set('variables')">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 3v18M3 12h18"/></svg>
+                Variables
+              </button>
+              @if (videosEnabled()) {
+                <button type="button" class="right-tab" role="tab" [class.active]="activeRightTab() === 'video'" [attr.aria-selected]="activeRightTab() === 'video'" (click)="openVideoTab()">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
+                  Video
+                </button>
+              }
+            </div>
+
+            @if (activeRightTab() === 'blocks') {
+              <div class="right-panel-body">
+                <h4 class="right-section-title">Content Blocks</h4>
+                <p class="right-section-desc">Click to insert or drag into the editor.</p>
+                <ui-search-input placeholder="Search blocks..." ariaLabel="Search blocks" [(value)]="blockSearch" />
+
+                @for (group of filteredBlockGroups(); track group.name) {
+                  <div class="block-group">
+                    <button type="button" class="block-group-header" [attr.aria-expanded]="isOpen('b:' + group.name)" (click)="toggleGroup('b:' + group.name)">
+                      <svg class="chevron" [class.expanded]="isOpen('b:' + group.name)" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+                      <span>{{ group.name }}</span>
+                      <span class="block-count">{{ group.blocks.length }}</span>
+                    </button>
+                    @if (isOpen('b:' + group.name)) {
+                      <div class="block-list">
+                        @for (block of group.blocks; track block.key) {
+                          <!-- A div, not a button: Firefox does not start a drag from a <button>. Role, tabindex and Enter / Space keep it a keyboard control; a click inserts the block. -->
+                          <div role="button" tabindex="0" class="block-item" draggable="true" [attr.aria-label]="'Insert ' + block.label"
+                            (dragstart)="onPaletteDragStart($event, block)" (dragend)="onBlockDragEnd()" (click)="insertBlock(block)"
+                            (keydown.enter)="insertBlock(block); $event.preventDefault()" (keydown.space)="insertBlock(block); $event.preventDefault()">
+                            <svg class="block-item-drag" width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
+                            {{ block.label }}
+                          </div>
+                        }
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            @if (activeRightTab() === 'variables') {
+              <div class="right-panel-body">
+                <h4 class="right-section-title">Template Variables</h4>
+                <p class="right-section-desc">Click a variable to insert it at the cursor position.</p>
+
+                @for (group of variableGroups(); track group.name) {
+                  <div class="block-group">
+                    <button type="button" class="block-group-header" [attr.aria-expanded]="isOpen('v:' + group.name)" (click)="toggleGroup('v:' + group.name)">
+                      <svg class="chevron" [class.expanded]="isOpen('v:' + group.name)" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
+                      <span>{{ group.name }}</span>
+                      <span class="block-count">{{ group.variables.length }}</span>
+                    </button>
+                    @if (isOpen('v:' + group.name)) {
+                      <div class="variable-list">
+                        @for (v of group.variables; track v.key) {
+                          <button type="button" class="variable-item" (mousedown)="saveSelection()" (click)="insertVariable(v)">
+                            <span class="var-tag">{{ '{{' + v.key + '}}' }}</span>
+                            <span class="var-label">{{ v.label }}</span>
+                            <span class="var-example">{{ v.example }}</span>
+                          </button>
+                        }
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            @if (activeRightTab() === 'video' && videosEnabled()) {
+              <div class="right-panel-body video-library-panel">
+                <h4 class="right-section-title">Video Library</h4>
+                <p class="right-section-hint">Click a video to add it as a new block in your email.</p>
+
+                <div class="video-config-section">
+                  <ui-radio-group label="Playback" orientation="horizontal" [options]="playbackOptions" [ngModel]="videoAutoplay() ? 'autoplay' : 'click'" (ngModelChange)="videoAutoplay.set($event === 'autoplay')" />
+                </div>
+                <div class="video-config-section">
+                  <ui-text-input label="Caption" placeholder="e.g. Click to watch my video for you" [maxlength]="200" [(ngModel)]="videoCaption" />
+                </div>
+                <div class="video-config-section">
+                  <ui-select label="Call-to-Action" [options]="ctaTypeOptions" [(ngModel)]="videoCtaType" />
+                  @if (videoCtaType()) {
+                    <ui-text-input ariaLabel="Call-to-action address" type="url" placeholder="https://..." [(ngModel)]="videoCtaUrl" />
+                    <ui-text-input ariaLabel="Call-to-action button label" placeholder="Button label" [maxlength]="100" [(ngModel)]="videoCtaLabel" />
+                  }
+                </div>
+                <div class="video-config-section">
+                  <ui-checkbox label="Hide Reactions" [(checked)]="videoHideReactions" />
+                </div>
+
+                @if (videosLoading()) {
+                  <div class="video-lib-loading" role="status" aria-busy="true" aria-label="Loading videos">
+                    @for (n of [1, 2, 3]; track n) {
+                      <div class="video-lib-skeleton">
+                        <ui-skeleton [height]="40" width="56px" [radius]="6" />
+                        <div class="vls-info"><ui-skeleton [height]="10" width="75%" [radius]="5" /><ui-skeleton [height]="10" width="45%" [radius]="5" /></div>
+                      </div>
+                    }
+                  </div>
+                } @else if (videos().length === 0) {
+                  <div class="video-lib-empty">
+                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
+                    <p>No videos yet</p>
+                    <span>{{ noVideosHint() }}</span>
+                  </div>
+                } @else {
+                  <div class="video-lib-list">
+                    @for (video of videos(); track video.id) {
+                      <button type="button" class="video-lib-item" [class.selected]="video.id === videoId()" [attr.aria-pressed]="video.id === videoId()" (click)="insertVideo(video)">
+                        <span class="vli-thumb">
+                          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                          @if (video.durationSeconds) {
+                            <span class="vli-dur">{{ formatDuration(video.durationSeconds) }}</span>
+                          }
+                        </span>
+                        <span class="vli-info">
+                          <span class="vli-title">{{ video.title }}</span>
+                          <span class="vli-cat">{{ categoryLabel(video.category) }}</span>
+                        </span>
+                        @if (video.id === videoId()) {
+                          <svg class="vli-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
+                        }
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          }
+        </aside>
+      </div>
+    </div>
+
+    <!-- Test Send -->
+    <ui-side-panel [open]="showTestSendDialog()" title="Send Test Email" primaryLabel="Send Test" [primaryLoading]="testSending()" [primaryDisabled]="!canSendTest()"
+      (closed)="showTestSendDialog.set(false)" (primaryClick)="onTestSend()">
+      <p class="config-desc">Send this template to an email address to preview how it will look in an inbox.</p>
+      @if (!editingId()) {
+        <div class="test-save-note">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+          Save the template first before sending a test.
+        </div>
+      }
+      <div class="config-field config-field-mt">
+        <ui-text-input label="Recipient Email" type="email" placeholder="you@example.com" [(ngModel)]="testSendEmail" [error]="testEmailError()" (keydown.enter)="onTestSend()" />
+      </div>
+      @if (hasUnsavedChanges()) {
+        <div class="test-save-note" role="note" data-testid="test-unsaved-note">
+          You have unsaved changes. The test email sends the last saved version of this template.
+        </div>
+      }
+    </ui-side-panel>
+
+    <!-- AI Generate -->
+    <ui-side-panel [open]="showAiPanel()" title="Generate with AI" primaryLabel="Generate" [primaryLoading]="aiGenerating()" [primaryDisabled]="!canGenerate()"
+      (closed)="showAiPanel.set(false)" (primaryClick)="onAiGenerate()">
+      <p class="config-desc">Describe the email you want to write. The AI will generate professional content and add it as a new block.</p>
+      <div class="ai-prompt-examples">
+        <span class="ai-example-label">Try:</span>
+        @for (ex of aiExamples(); track ex) {
+          <ui-chip [label]="ex" size="sm" (select)="aiPrompt.set(ex)" />
+        }
+      </div>
+      <div class="config-field config-field-mt">
+        <ui-textarea-input label="What do you want to write?" [rows]="5" placeholder="e.g. A friendly follow-up email for a buyer who attended an open house last weekend" [(ngModel)]="aiPrompt" />
+      </div>
+    </ui-side-panel>
+
+    <!-- Assignment config -->
+    <ui-side-panel [wide]="true" [open]="showAssignmentConfig()" [title]="configTarget()?.name || 'Configure Automation'" primaryLabel="Save Configuration"
+      [primaryDisabled]="!configEmail() && !configText()" (closed)="showAssignmentConfig.set(false)" (primaryClick)="saveAssignmentConfig()">
+      @if (configTarget(); as target) {
+        <p class="config-desc">{{ target.description }}</p>
+        <hr class="config-divider" />
+        <div class="config-section">
+          <span class="config-section-label">EMAIL TEMPLATE</span>
+          <div class="config-field">
+            <span class="config-label">Assigned Template</span>
+            <div class="config-readonly">{{ name() || 'Current template' }}</div>
+            <span class="config-hint">This template will be used when this automation is triggered.</span>
+          </div>
+        </div>
+        <hr class="config-divider" />
+        <div class="config-section">
+          <span class="config-section-label">CHANNELS <span class="required" aria-hidden="true">*</span></span>
+          <ui-checkbox label="Email" [(checked)]="configEmail" />
+          <ui-checkbox label="Text (SMS)" [(checked)]="configText" [disabled]="!textEnabled()" [hint]="textEnabled() ? '' : '(not enabled)'" />
+        </div>
+      }
+    </ui-side-panel>
+  `,
+			styles: [":host{display:block}.required{color:#ef4444;font-weight:400}.editor-page{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#f8fafc;overflow:hidden}.editor-topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 24px;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0}.topbar-left{display:flex;align-items:center;gap:8px;min-width:0}.topbar-right{display:flex;align-items:center;gap:8px}.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.9375rem;font-weight:700;color:#1e293b;min-width:0}.breadcrumb a{color:#1e293b;text-decoration:none;cursor:pointer}.breadcrumb a:hover{color:#3b82f6}.breadcrumb svg{color:#94a3b8;flex-shrink:0}.breadcrumb span{color:#64748b;font-weight:500}.readonly-note{margin:0;padding:8px 16px;font-size:.8125rem;color:#92400e;background:#fffbeb;border-bottom:1px solid #fde68a}.readonly-note.system-note{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.editor-body{display:grid;grid-template-columns:340px minmax(0,1fr) 300px;flex:1;min-height:0;overflow:hidden}.panel-left{background:#fff;border-right:1px solid #e2e8f0;padding:24px;overflow-y:auto}.panel-title{font-size:1.0625rem;font-weight:700;color:#1e293b;margin:0 0 20px}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-row-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.assignments-section{border-top:1px solid #e2e8f0;padding-top:20px;margin-top:16px}.section-title{font-size:.9375rem;font-weight:700;color:#1e293b;margin:0 0 6px}.section-desc{font-size:.8125rem;color:#64748b;line-height:1.5;margin:0 0 12px}.assignment-list{max-height:340px;overflow-y:auto;margin-top:12px;border:1px solid #e2e8f0;border-radius:8px}.assignment-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:background .1s}.assignment-item:last-child{border-bottom:none}.assignment-item:hover{background:#f8fafc}.assignment-item:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.assignment-item.assignment-readonly{cursor:default}.assignment-item.assignment-readonly:hover{background:transparent}.assignment-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.assignment-text strong{font-size:.8125rem;color:#1e293b}.assignment-text span{font-size:.75rem;color:#64748b}.assignment-channels{display:flex;gap:4px;flex-shrink:0}.channel-badge{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:#f1f5f9;color:#94a3b8;transition:all .15s}.channel-badge.active{background:#3b82f6;color:#fff}.channel-badge.disabled{opacity:.4;cursor:not-allowed}.config-desc{font-size:.875rem;color:#64748b;line-height:1.5;margin:0}.config-divider{border:none;border-top:1px solid #e2e8f0;margin:20px 0}.config-section{display:flex;flex-direction:column;gap:12px}.config-section-label{font-size:.6875rem;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:.04em}.config-field{display:flex;flex-direction:column;gap:6px}.config-field-mt{margin-top:16px}.config-label{font-size:.8125rem;font-weight:600;color:#1e293b}.config-readonly{padding:9px 12px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;font-size:.875rem;color:#1e293b}.config-hint{font-size:.75rem;color:#64748b}.test-save-note{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;font-size:.8125rem;color:#92400e;margin-top:12px}.test-save-note svg{flex-shrink:0}.ai-prompt-examples{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}.ai-example-label{font-size:.75rem;color:#64748b;font-weight:600}.panel-center{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.editor-tabs{display:flex;gap:2px;padding:12px 20px 0;background:#fff;border-bottom:1px solid #e2e8f0;overflow-x:auto;-webkit-overflow-scrolling:touch}.editor-tab{display:flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid #e2e8f0;border-bottom:none;border-radius:8px 8px 0 0;background:#f8fafc;font-size:.8125rem;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit;white-space:nowrap}.editor-tab:hover{background:#fff;color:#1e293b}.editor-tab.active{background:#eff6ff;color:#3b82f6;border-color:#93c5fd}.editor-tab:focus-visible,.right-tab:focus-visible,.block-group-header:focus-visible,.variable-item:focus-visible,.add-block-btn:focus-visible,.block-item:focus-visible,.video-lib-item:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.editor-toolbar{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border-bottom:1px solid #e2e8f0;flex-wrap:wrap}.toolbar-row-2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 20px;background:#fff;border-bottom:1px solid #e2e8f0}.toolbar-group{display:flex;align-items:center;gap:2px;padding-right:8px;border-right:1px solid #e2e8f0}.toolbar-group:last-child{border-right:none;padding-right:0}.toolbar-select{display:block;min-width:96px}.toolbar-label{font-size:.75rem;font-weight:600;color:#64748b;white-space:nowrap;margin-right:6px}.ai-dot{width:8px;height:8px;border-radius:50%;background:#3b82f6;display:inline-block;margin-right:6px}.hidden-color-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;border:none;padding:0}.color-indicator{display:flex;flex-direction:column;align-items:center;gap:2px;color:#475569}.color-bar{display:block;width:16px;height:3px;border-radius:2px;border:1px solid rgba(0,0,0,.1)}.link-dialog{background:#fff;border-bottom:1px solid #e2e8f0;padding:12px 20px}.link-dialog-inner{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}.link-dialog-title{font-size:.8125rem;font-weight:700;color:#1e293b;white-space:nowrap;padding-top:10px}.link-dialog-input{display:block;width:240px;max-width:100%}.link-dialog-actions{display:flex;gap:6px}.preview-frame{flex:1;display:flex;justify-content:center;padding:24px;overflow-y:auto;background:#f1f5f9}.preview-frame.mobile{align-items:flex-start}.preview-content{max-width:600px;width:100%;box-sizing:border-box;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:32px;min-height:400px;font-size:.9375rem;line-height:1.6;color:#1e293b;overflow-wrap:anywhere}.preview-content p{margin:0 0 8px}.mobile-shell{width:375px;max-width:100%;box-sizing:border-box;min-height:600px;border:2px solid #1e293b;border-radius:24px;padding:40px 12px 24px;background:#fff;box-shadow:0 8px 32px #0000001f}.mobile-shell .preview-content{border:none;border-radius:0;padding:16px;max-width:100%}.blocks-canvas{flex:1;padding:16px 20px 24px;overflow-y:auto;background:#f1f5f9;display:flex;flex-direction:column}.block-wrapper{position:relative;display:flex;align-items:flex-start;background:#fff;border:2px solid transparent;border-radius:8px;transition:border-color .15s,box-shadow .15s}.block-wrapper:hover,.block-wrapper.selected,.block-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.block-wrapper:hover .block-drag-handle,.block-wrapper.selected .block-drag-handle,.block-wrapper:focus-within .block-drag-handle{opacity:1}.block-wrapper:hover .block-controls,.block-wrapper.selected .block-controls,.block-wrapper:focus-within .block-controls{opacity:1;pointer-events:all}.block-wrapper.dragging{opacity:.4}.block-drag-handle{flex-shrink:0;width:28px;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;opacity:0;transition:opacity .15s;cursor:grab;color:#94a3b8}.block-drag-handle:active{cursor:grabbing}.block-content{flex:1;min-width:0;padding:12px 16px;outline:none;font-size:.9375rem;color:#1e293b;line-height:1.6;min-height:48px;overflow-wrap:anywhere}.block-content:empty:before{content:\"Click to edit...\";color:#94a3b8;font-style:italic;pointer-events:none}.block-content p{margin:0 0 8px}.block-content p:last-child{margin:0}.block-content h1,.block-content h2,.block-content h3{margin:8px 0 6px;color:#1e293b}.block-content a{color:#3b82f6}.block-content img{max-width:100%;border-radius:6px}.block-content ul,.block-content ol{padding-left:20px;margin:0 0 8px}.block-controls{position:absolute;top:6px;right:6px;display:flex;gap:2px;opacity:0;pointer-events:none;transition:opacity .15s;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:3px;box-shadow:0 2px 6px #00000014}@media(hover:none){.block-wrapper.selected .block-controls{opacity:1;pointer-events:all}}.drop-zone{height:8px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:height .15s,background .15s;position:relative}.drop-zone-label{font-size:.75rem;font-weight:600;color:#3b82f6;opacity:0;transition:opacity .1s}.drop-zone.active{height:40px;background:#3b82f614;border:2px dashed #3b82f6}.drop-zone.active .drop-zone-label{opacity:1}.add-block-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:12px;margin-top:8px;border:2px dashed #e2e8f0;border-radius:8px;background:none;font-size:.875rem;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s}.add-block-btn:hover{border-color:#3b82f6;color:#3b82f6;background:#3b82f60a}.panel-right{background:#fff;border-left:1px solid #e2e8f0;display:flex;flex-direction:column;min-height:0;min-width:0}.right-tabs{display:flex;border-bottom:1px solid #e2e8f0}.right-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;min-height:44px;border:none;background:none;font-size:.8125rem;font-weight:600;color:#64748b;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent}.right-tab:hover{color:#1e293b}.right-tab.active{color:#3b82f6;background:#eff6ff;border-bottom-color:#3b82f6}.right-panel-body{flex:1;padding:20px;overflow-y:auto}.right-section-title{font-size:.9375rem;font-weight:700;color:#1e293b;margin:0 0 12px}.right-section-desc{font-size:.8125rem;color:#64748b;margin:0 0 16px;line-height:1.5}.right-section-hint{font-size:.8125rem;color:#64748b;margin:0 0 12px;line-height:1.5}.block-group{border-bottom:1px solid #f1f5f9}.block-group-header{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:12px 0;border:none;background:none;font-size:.875rem;font-weight:600;color:#1e293b;cursor:pointer;font-family:inherit;text-align:left}.block-group-header .chevron{transition:transform .2s;color:#94a3b8}.block-group-header .chevron.expanded{transform:rotate(90deg)}.block-group-header span:nth-of-type(1){flex:1}.block-count{font-size:.75rem;font-weight:600;color:#64748b;background:#f1f5f9;padding:2px 8px;border-radius:10px;margin-left:auto}.block-list,.variable-list{display:flex;flex-direction:column;gap:2px;padding-bottom:8px}.block-item{display:flex;align-items:center;gap:6px;box-sizing:border-box;width:100%;min-height:44px;padding:8px 12px 8px 28px;font-size:.8125rem;color:#64748b;cursor:pointer;text-align:left;border-radius:4px;font-family:inherit;-webkit-user-select:none;user-select:none}.block-item:hover{background:#f8fafc;color:#1e293b}.block-item-drag{color:#cbd5e1;flex-shrink:0;cursor:grab}.variable-item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;min-height:44px;padding:8px 12px 8px 28px;border:none;background:none;cursor:pointer;text-align:left;border-radius:4px;font-family:inherit}.variable-item:hover{background:#f8fafc}.var-tag{font-size:.75rem;font-weight:600;color:#3b82f6;background:#3b82f614;padding:2px 6px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.var-label{font-size:.8125rem;color:#1e293b}.var-example{font-size:.75rem;color:#64748b;overflow-wrap:anywhere}.video-library-panel{padding:0}.video-library-panel .right-section-title,.video-library-panel .right-section-hint{padding:0 16px}.video-library-panel .right-section-title{padding-top:16px}.video-config-section{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-bottom:1px solid #f1f5f9}.video-config-section:last-of-type{border-bottom:none}.video-lib-list{display:flex;flex-direction:column;gap:2px;padding:8px 8px 16px}.video-lib-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;text-align:left;font-family:inherit;transition:background .15s,border-color .15s}.video-lib-item:hover{background:#f8fafc;border-color:#e2e8f0}.video-lib-item.selected{background:#eff6ff;border-color:#93c5fd}.vli-thumb{position:relative;flex-shrink:0;width:56px;height:40px;border-radius:6px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);display:flex;align-items:center;justify-content:center}.vli-dur{position:absolute;bottom:2px;right:3px;font-size:.625rem;font-weight:600;color:#fff;background:#000000a6;padding:1px 4px;border-radius:3px}.vli-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.vli-title{font-size:.8125rem;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vli-cat{font-size:.75rem;color:#64748b}.vli-check{flex-shrink:0}.video-lib-empty{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;gap:8px}.video-lib-empty p{font-size:.875rem;font-weight:500;color:#475569;margin:0}.video-lib-empty span{font-size:.8125rem;color:#64748b}.video-lib-loading{padding:8px}.video-lib-skeleton{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:4px}.vls-info{flex:1;display:flex;flex-direction:column;gap:6px}@media(max-width:1200px){.editor-body{grid-template-columns:280px minmax(0,1fr) 260px}}@media(max-width:900px){.editor-page{height:auto;min-height:100vh;min-height:100dvh;overflow:visible}.editor-body{display:flex;flex-direction:column;overflow:visible}.editor-topbar{padding:12px 16px}.panel-left{border-right:none;border-bottom:1px solid #e2e8f0;overflow:visible;padding:16px}.panel-center{overflow:visible;min-height:480px}.blocks-canvas{overflow:visible;min-height:320px}.panel-right{border-left:none;border-top:1px solid #e2e8f0}.right-panel-body{overflow:visible}.editor-toolbar,.toolbar-row-2,.link-dialog,.editor-tabs{padding-left:12px;padding-right:12px}.preview-frame{padding:12px}.preview-content{padding:16px}.form-row-dates{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		template: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "template",
+				required: false
+			}]
+		}],
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: false
+			}]
+		}],
+		categoryPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categoryPlaceholder",
+				required: false
+			}]
+		}],
+		assignmentOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "assignmentOptions",
+				required: false
+			}]
+		}],
+		featuredAssignmentKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "featuredAssignmentKey",
+				required: false
+			}]
+		}],
+		assignmentsDescription: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "assignmentsDescription",
+				required: false
+			}]
+		}],
+		textEnabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "textEnabled",
+				required: false
+			}]
+		}],
+		variableGroups: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variableGroups",
+				required: false
+			}]
+		}],
+		blockGroups: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "blockGroups",
+				required: false
+			}]
+		}],
+		aiExamples: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aiExamples",
+				required: false
+			}]
+		}],
+		namePlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "namePlaceholder",
+				required: false
+			}]
+		}],
+		subjectPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subjectPlaceholder",
+				required: false
+			}]
+		}],
+		backLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "backLabel",
+				required: false
+			}]
+		}],
+		createLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "createLabel",
+				required: false
+			}]
+		}],
+		editLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editLabel",
+				required: false
+			}]
+		}],
+		systemNote: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "systemNote",
+				required: false
+			}]
+		}],
+		readOnlyNote: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readOnlyNote",
+				required: false
+			}]
+		}],
+		idPrefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "idPrefix",
+				required: false
+			}]
+		}],
+		maxBodyLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxBodyLength",
+				required: false
+			}]
+		}],
+		maxTextLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxTextLength",
+				required: false
+			}]
+		}],
+		fullAccess: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullAccess",
+				required: false
+			}]
+		}],
+		systemTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "systemTemplate",
+				required: false
+			}]
+		}],
+		aiEnabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aiEnabled",
+				required: false
+			}]
+		}],
+		testSendEnabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testSendEnabled",
+				required: false
+			}]
+		}],
+		videosEnabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "videosEnabled",
+				required: false
+			}]
+		}],
+		saving: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "saving",
+				required: false
+			}]
+		}],
+		testSending: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testSending",
+				required: false
+			}]
+		}],
+		aiGenerating: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aiGenerating",
+				required: false
+			}]
+		}],
+		videos: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "videos",
+				required: false
+			}]
+		}],
+		videosLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "videosLoading",
+				required: false
+			}]
+		}],
+		videoDefaults: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "videoDefaults",
+				required: false
+			}]
+		}],
+		videoLink: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "videoLink",
+				required: false
+			}]
+		}],
+		noVideosHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noVideosHint",
+				required: false
+			}]
+		}],
+		back: [{
+			type: i0.Output,
+			args: ["back"]
+		}],
+		save: [{
+			type: i0.Output,
+			args: ["save"]
+		}],
+		testSend: [{
+			type: i0.Output,
+			args: ["testSend"]
+		}],
+		aiGenerate: [{
+			type: i0.Output,
+			args: ["aiGenerate"]
+		}],
+		videosRequested: [{
+			type: i0.Output,
+			args: ["videosRequested"]
+		}],
+		useAsMine: [{
+			type: i0.Output,
+			args: ["useAsMine"]
+		}],
+		blockEditors: [{
+			type: i0.ViewChildren,
+			args: ["blockEditor", { isSignal: true }]
+		}],
+		colorInputRef: [{
+			type: i0.ViewChild,
+			args: ["colorInput", { isSignal: true }]
+		}]
+	}
+});
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_EMAIL_TEMPLATE_BLOCK_GROUPS, DEFAULT_EMAIL_TEMPLATE_VARIABLE_GROUPS, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EMAIL_BLOCK_DRAG_TYPE, EMAIL_TEMPLATE_MAX_BODY, EMAIL_TEMPLATE_MAX_TEXT, EMAIL_TEMPLATE_START_TEXT, EmailTemplateEditorComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IDX_BEHAVIOR_SIGNALS, INTEGRATION_CATALOG, INTEGRATION_FIELD_DEFS, INTEGRATION_GROUP_ORDER, INTEGRATION_OPTION_DEFS, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, MAX_EMAIL_ADDRESS_LENGTH, ModalComponent, MoreMenuComponent, MultiSelectComponent, NOTES_MAX_LENGTH, NotesComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SETUP_DONE_KEY, SETUP_INTEGRATIONS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SetupWizardComponent, SetupWizardStepDirective, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, blockHasContent, buildDefaultSchedule, buildVideoBlockHtml, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, encodeFilterValue, encodeFilterValues, errorContextInterceptor, escapeHtml, fileMatchesAccept, formatAddress, formatCategoryLabel, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, formatVideoDuration, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, insideEditorBlock, integrationPlainText, integrationsForApp, integrationsOnlyFor, isBlockDrag, isValidEmailAddress, isWebUrl, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours, setupIntegrations };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map