@escalated-dev/escalated 0.8.0 → 0.9.0

package/src/components/WorkflowTriggerSelector.vue

@@ -1,125 +1,125 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-    modelValue: { type: String, default: '' },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const triggers = [
-    {
-        value: 'ticket_created',
-        label: 'Ticket Created',
-        description: 'When a new ticket is submitted',
-        icon: 'M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z',
-    },
-    {
-        value: 'ticket_updated',
-        label: 'Ticket Updated',
-        description: 'When any ticket field is modified',
-        icon: 'M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182',
-    },
-    {
-        value: 'reply_added',
-        label: 'Reply Added',
-        description: 'When a reply is posted on a ticket',
-        icon: 'M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z',
-    },
-    {
-        value: 'status_changed',
-        label: 'Status Changed',
-        description: 'When the ticket status is updated',
-        icon: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
-    },
-    {
-        value: 'ticket_assigned',
-        label: 'Ticket Assigned',
-        description: 'When a ticket is assigned to an agent',
-        icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z',
-    },
-    {
-        value: 'ticket_escalated',
-        label: 'Ticket Escalated',
-        description: 'When a ticket is escalated',
-        icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12',
-    },
-    {
-        value: 'sla_breached',
-        label: 'SLA Breached',
-        description: 'When an SLA target is breached',
-        icon: 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z',
-    },
-    {
-        value: 'sla_warning',
-        label: 'SLA Warning',
-        description: 'When an SLA target is approaching',
-        icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
-    },
-    {
-        value: 'chat_started',
-        label: 'Chat Started',
-        description: 'When a live chat session begins',
-        icon: 'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155',
-    },
-    {
-        value: 'chat_ended',
-        label: 'Chat Ended',
-        description: 'When a live chat session ends',
-        icon: 'M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
-    },
-];
-
-const selected = computed(() => props.modelValue);
-
-function select(value) {
-    emit('update:modelValue', value);
-}
-</script>
-
-<template>
-    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
-        <button
-            v-for="trigger in triggers"
-            :key="trigger.value"
-            type="button"
-            class="group relative flex flex-col items-center rounded-xl border-2 p-4 text-center transition-all"
-            :class="
-                selected === trigger.value
-                    ? 'border-blue-500 bg-blue-500/10 shadow-lg shadow-blue-500/10'
-                    : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] hover:border-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)]'
-            "
-            @click="select(trigger.value)"
-        >
-            <div
-                class="mb-2 flex h-10 w-10 items-center justify-center rounded-lg"
-                :class="
-                    selected === trigger.value
-                        ? 'bg-blue-500/20 text-blue-400'
-                        : 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)] group-hover:text-[var(--esc-panel-text-secondary)]'
-                "
-            >
-                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" :d="trigger.icon" />
-                </svg>
-            </div>
-            <span
-                class="text-xs font-semibold"
-                :class="selected === trigger.value ? 'text-blue-400' : 'text-[var(--esc-panel-text-secondary)]'"
-            >
-                {{ trigger.label }}
-            </span>
-            <span class="mt-1 text-[10px] leading-tight text-[var(--esc-panel-text-muted)]">
-                {{ trigger.description }}
-            </span>
-            <div
-                v-if="selected === trigger.value"
-                class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-white"
-            >
-                <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-                </svg>
-            </div>
-        </button>
-    </div>
-</template>
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const triggers = [
+    {
+        value: 'ticket_created',
+        label: 'Ticket Created',
+        description: 'When a new ticket is submitted',
+        icon: 'M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z',
+    },
+    {
+        value: 'ticket_updated',
+        label: 'Ticket Updated',
+        description: 'When any ticket field is modified',
+        icon: 'M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182',
+    },
+    {
+        value: 'reply_added',
+        label: 'Reply Added',
+        description: 'When a reply is posted on a ticket',
+        icon: 'M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z',
+    },
+    {
+        value: 'status_changed',
+        label: 'Status Changed',
+        description: 'When the ticket status is updated',
+        icon: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    },
+    {
+        value: 'ticket_assigned',
+        label: 'Ticket Assigned',
+        description: 'When a ticket is assigned to an agent',
+        icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z',
+    },
+    {
+        value: 'ticket_escalated',
+        label: 'Ticket Escalated',
+        description: 'When a ticket is escalated',
+        icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12',
+    },
+    {
+        value: 'sla_breached',
+        label: 'SLA Breached',
+        description: 'When an SLA target is breached',
+        icon: 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z',
+    },
+    {
+        value: 'sla_warning',
+        label: 'SLA Warning',
+        description: 'When an SLA target is approaching',
+        icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
+    },
+    {
+        value: 'chat_started',
+        label: 'Chat Started',
+        description: 'When a live chat session begins',
+        icon: 'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155',
+    },
+    {
+        value: 'chat_ended',
+        label: 'Chat Ended',
+        description: 'When a live chat session ends',
+        icon: 'M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    },
+];
+
+const selected = computed(() => props.modelValue);
+
+function select(value) {
+    emit('update:modelValue', value);
+}
+</script>
+
+<template>
+    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+        <button
+            v-for="trigger in triggers"
+            :key="trigger.value"
+            type="button"
+            class="group relative flex flex-col items-center rounded-xl border-2 p-4 text-center transition-all"
+            :class="
+                selected === trigger.value
+                    ? 'border-blue-500 bg-blue-500/10 shadow-lg shadow-blue-500/10'
+                    : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] hover:border-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)]'
+            "
+            @click="select(trigger.value)"
+        >
+            <div
+                class="mb-2 flex h-10 w-10 items-center justify-center rounded-lg"
+                :class="
+                    selected === trigger.value
+                        ? 'bg-blue-500/20 text-blue-400'
+                        : 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)] group-hover:text-[var(--esc-panel-text-secondary)]'
+                "
+            >
+                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" :d="trigger.icon" />
+                </svg>
+            </div>
+            <span
+                class="text-xs font-semibold"
+                :class="selected === trigger.value ? 'text-blue-400' : 'text-[var(--esc-panel-text-secondary)]'"
+            >
+                {{ trigger.label }}
+            </span>
+            <span class="mt-1 text-[10px] leading-tight text-[var(--esc-panel-text-muted)]">
+                {{ trigger.description }}
+            </span>
+            <div
+                v-if="selected === trigger.value"
+                class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-white"
+            >
+                <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+            </div>
+        </button>
+    </div>
+</template>

package/src/components/admin/newsletters/AnalyticsTiles.stories.js

@@ -0,0 +1,14 @@
+import AnalyticsTiles from './AnalyticsTiles.vue';
+
+export default { title: 'Admin/Newsletters/AnalyticsTiles', component: AnalyticsTiles };
+
+export const Default = {
+    args: {
+        summary: { total: 1000, sent: 990, opened: 400, clicked: 80, bounced: 10, complained: 1 },
+        topClicks: [
+            { url: 'https://example.com/launch', clicks: 42 },
+            { url: 'https://example.com/blog/post', clicks: 18 },
+            { url: 'https://example.com/pricing', clicks: 7 },
+        ],
+    },
+};

package/src/components/admin/newsletters/AnalyticsTiles.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="analytics-tiles">
+        <SummaryTiles :summary="summary" />
+        <section v-if="topClicks?.length" class="analytics-tiles__top-clicks">
+            <h3>Top clicked URLs</h3>
+            <ol>
+                <li v-for="row in topClicks" :key="row.url">
+                    <span class="analytics-tiles__url">{{ row.url }}</span>
+                    <span class="analytics-tiles__count">{{ row.clicks }}</span>
+                </li>
+            </ol>
+        </section>
+    </div>
+</template>
+
+<script setup>
+import SummaryTiles from './SummaryTiles.vue';
+
+defineProps({
+    summary: { type: Object, required: true },
+    topClicks: { type: Array, default: () => [] },
+});
+</script>
+
+<style scoped>
+.analytics-tiles {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+.analytics-tiles__top-clicks h3 {
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--escalated-text-muted, #64748b);
+    margin: 0 0 8px;
+}
+.analytics-tiles__top-clicks ol {
+    margin: 0;
+    padding-left: 20px;
+}
+.analytics-tiles__top-clicks li {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 4px 0;
+}
+.analytics-tiles__url {
+    word-break: break-all;
+}
+.analytics-tiles__count {
+    font-variant-numeric: tabular-nums;
+    color: var(--escalated-text-muted, #64748b);
+}
+</style>

package/src/components/admin/newsletters/DeliveriesTable.stories.js

@@ -0,0 +1,28 @@
+import DeliveriesTable from './DeliveriesTable.vue';
+
+export default { title: 'Admin/Newsletters/DeliveriesTable', component: DeliveriesTable };
+
+export const Default = {
+    args: {
+        rows: [
+            {
+                id: 1,
+                contact: { name: 'Maria', email: 'maria@example.com' },
+                status: 'sent',
+                sent_at: '2026-05-19T12:00:00Z',
+                opened_at: '2026-05-19T13:00:00Z',
+                last_clicked_at: '2026-05-19T13:05:00Z',
+                bounce_reason: null,
+            },
+            {
+                id: 2,
+                contact: { name: null, email: 'x@example.com' },
+                status: 'bounced',
+                sent_at: '2026-05-19T12:00:00Z',
+                opened_at: null,
+                last_clicked_at: null,
+                bounce_reason: '550 mailbox not found',
+            },
+        ],
+    },
+};

package/src/components/admin/newsletters/DeliveriesTable.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="deliveries-table">
+        <div class="deliveries-table__toolbar">
+            <select
+                class="deliveries-table__filter"
+                :value="statusFilter"
+                @change="$emit('filter', $event.target.value)"
+            >
+                <option value="">All statuses</option>
+                <option v-for="s in statuses" :key="s" :value="s">{{ s }}</option>
+            </select>
+            <button type="button" class="deliveries-table__export" @click="$emit('export')">Export CSV</button>
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <th>Contact</th>
+                    <th>Status</th>
+                    <th>Sent</th>
+                    <th>Opened</th>
+                    <th>Last clicked</th>
+                    <th>Bounce reason</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="row in rows" :key="row.id">
+                    <td>
+                        <div>{{ row.contact.name ?? '—' }}</div>
+                        <div class="deliveries-table__email">{{ row.contact.email }}</div>
+                    </td>
+                    <td>
+                        <span :class="`status status--${row.status}`">{{ row.status }}</span>
+                    </td>
+                    <td>{{ row.sent_at ? new Date(row.sent_at).toLocaleString() : '—' }}</td>
+                    <td>{{ row.opened_at ? new Date(row.opened_at).toLocaleString() : '—' }}</td>
+                    <td>{{ row.last_clicked_at ? new Date(row.last_clicked_at).toLocaleString() : '—' }}</td>
+                    <td>{{ row.bounce_reason ?? '—' }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    rows: { type: Array, required: true },
+    statusFilter: { type: String, default: '' },
+});
+defineEmits(['filter', 'export']);
+const statuses = ['pending', 'queued', 'sent', 'bounced', 'complained', 'suppressed', 'failed'];
+</script>
+
+<style scoped>
+.deliveries-table {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.deliveries-table__toolbar {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+.deliveries-table table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.deliveries-table th,
+.deliveries-table td {
+    text-align: left;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    font-size: 14px;
+}
+.deliveries-table__email {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+.status {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+.status--sent {
+    background: #e0f2fe;
+}
+.status--bounced {
+    background: #fee2e2;
+}
+.status--complained {
+    background: #fef3c7;
+}
+.status--pending,
+.status--queued {
+    background: #f1f5f9;
+}
+.status--failed {
+    background: #fecaca;
+}
+.status--suppressed {
+    background: #ede9fe;
+}
+</style>

package/src/components/admin/newsletters/DynamicFilterBuilder.stories.js

@@ -0,0 +1,11 @@
+import DynamicFilterBuilder from './DynamicFilterBuilder.vue';
+
+export default { title: 'Admin/Newsletters/DynamicFilterBuilder', component: DynamicFilterBuilder };
+
+export const Empty = { args: { modelValue: { rules: [] }, matchCount: 0 } };
+export const WithRules = {
+    args: {
+        modelValue: { rules: [{ field: 'tickets_count', op: '>=', value: 3 }] },
+        matchCount: 142,
+    },
+};

package/src/components/admin/newsletters/DynamicFilterBuilder.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="dynamic-filter-builder">
+        <textarea
+            class="dynamic-filter-builder__fallback"
+            :value="JSON.stringify(modelValue, null, 2)"
+            rows="10"
+            spellcheck="false"
+            @input="onInput"
+        />
+        <p class="dynamic-filter-builder__help">
+            Edit the saved filter JSON. A visual builder is planned for a follow-up.
+        </p>
+        <div class="dynamic-filter-builder__count">{{ matchCount }} contacts match</div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: { type: Object, required: true },
+    matchCount: { type: Number, default: 0 },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function onInput(event) {
+    try {
+        emit('update:modelValue', JSON.parse(event.target.value));
+    } catch {
+        // Invalid JSON during typing — ignore until it parses cleanly.
+    }
+}
+</script>
+
+<style scoped>
+.dynamic-filter-builder__fallback {
+    width: 100%;
+    font-family: ui-monospace, monospace;
+    font-size: 13px;
+    padding: 12px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+}
+.dynamic-filter-builder__help {
+    margin: 4px 0 0;
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+.dynamic-filter-builder__count {
+    margin-top: 8px;
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 13px;
+}
+</style>

package/src/components/admin/newsletters/ListMemberTable.stories.js

@@ -0,0 +1,12 @@
+import ListMemberTable from './ListMemberTable.vue';
+
+export default { title: 'Admin/Newsletters/ListMemberTable', component: ListMemberTable };
+
+export const Default = {
+    args: {
+        members: [
+            { id: 1, contact: { id: 10, name: 'Maria', email: 'maria@example.com' }, added_at: '2026-05-10T00:00:00Z' },
+            { id: 2, contact: { id: 11, name: null, email: 'noname@example.com' }, added_at: '2026-05-12T00:00:00Z' },
+        ],
+    },
+};

package/src/components/admin/newsletters/ListMemberTable.vue

@@ -0,0 +1,53 @@
+<template>
+    <table class="list-member-table">
+        <thead>
+            <tr>
+                <th>Contact</th>
+                <th>Added</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="m in members" :key="m.id">
+                <td>
+                    <div>{{ m.contact.name ?? '—' }}</div>
+                    <div class="list-member-table__email">{{ m.contact.email }}</div>
+                </td>
+                <td>{{ new Date(m.added_at).toLocaleDateString() }}</td>
+                <td>
+                    <button
+                        type="button"
+                        data-action="remove"
+                        :data-contact-id="m.contact.id"
+                        @click="$emit('remove', m.contact.id)"
+                    >
+                        Remove
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script setup>
+defineProps({ members: { type: Array, required: true } });
+defineEmits(['remove']);
+</script>
+
+<style scoped>
+.list-member-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.list-member-table th,
+.list-member-table td {
+    text-align: left;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    font-size: 14px;
+}
+.list-member-table__email {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+</style>

package/src/components/admin/newsletters/MarkdownEditor.stories.js

@@ -0,0 +1,6 @@
+import MarkdownEditor from './MarkdownEditor.vue';
+
+export default { title: 'Admin/Newsletters/MarkdownEditor', component: MarkdownEditor };
+
+export const Empty = { args: { modelValue: '' } };
+export const WithContent = { args: { modelValue: '# Welcome\n\nThanks for being a customer.' } };

package/src/components/admin/newsletters/MarkdownEditor.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="markdown-editor">
+        <textarea
+            ref="ta"
+            :value="modelValue"
+            :rows="rows"
+            class="markdown-editor__textarea"
+            :placeholder="placeholder"
+            @input="$emit('update:modelValue', $event.target.value)"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+    rows: { type: Number, default: 20 },
+    placeholder: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const ta = ref(null);
+
+function insertMergeField(path) {
+    const el = ta.value;
+    const token = `{{ ${path} }}`;
+    if (!el) {
+        emit('update:modelValue', `${props.modelValue}${token}`);
+        return;
+    }
+    const start = el.selectionStart ?? props.modelValue.length;
+    const end = el.selectionEnd ?? props.modelValue.length;
+    const next = props.modelValue.slice(0, start) + token + props.modelValue.slice(end);
+    emit('update:modelValue', next);
+}
+
+defineExpose({ insertMergeField });
+</script>
+
+<style scoped>
+.markdown-editor__textarea {
+    width: 100%;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 12px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    resize: vertical;
+}
+</style>

package/src/components/admin/newsletters/MergeFieldDropdown.stories.js

@@ -0,0 +1,6 @@
+import MergeFieldDropdown from './MergeFieldDropdown.vue';
+
+export default { title: 'Admin/Newsletters/MergeFieldDropdown', component: MergeFieldDropdown };
+
+export const Default = {};
+export const WithMetadataKeys = { args: { metadataKeys: ['tier', 'plan', 'lifecycle_stage'] } };