From f33f53f9dfc55f1d0caaba3ac91fc22fd1f6aa64 Mon Sep 17 00:00:00 2001 From: Adnaan Date: Thu, 2 Apr 2026 07:23:48 +0530 Subject: [PATCH 1/5] feat: add client-side toast directive (handleToastDirectives) Implements the trigger-attribute pattern for ephemeral components: - handleToastDirectives() reads data-pending on [data-toast-trigger] spans and creates fully client-managed toast DOM after each DOM update - setupToastClickOutside() dismisses toasts on outside click (called at connect) - injectToastStyles() injects positioning CSS; called every update cycle so it survives morphdom patching of Co-Authored-By: Claude Sonnet 4.6 --- dom/directives.ts | 147 +++++++++++++++++++++++++++++++++++++++++ livetemplate-client.ts | 8 +++ 2 files changed, 155 insertions(+) diff --git a/dom/directives.ts b/dom/directives.ts index 107d821..bf9bf80 100644 --- a/dom/directives.ts +++ b/dom/directives.ts @@ -166,3 +166,150 @@ export function handleAnimateDirectives(rootElement: Element): void { document.head.appendChild(style); } } + +// ─── Toast directives ──────────────────────────────────────────────────────── + +interface ToastMessage { + id: string; + title?: string; + body?: string; + type: "info" | "success" | "warning" | "error"; + dismissible: boolean; + dismissMS: number; +} + +// Key used to store the last processed data-pending value on each trigger element. +// Prevents showing the same batch of toasts twice if handleToastDirectives is +// called multiple times within a single update cycle (e.g. from multiple patches). +const PENDING_PROCESSED_KEY = "__lvtPendingProcessed"; + +/** + * Read data-pending toast messages from server trigger elements and create + * client-managed toast DOM. Called after each LiveTemplate DOM update. + */ +export function handleToastDirectives(rootElement: Element): void { + // Re-inject styles on every call — morphdom may have removed the injected + //