diff --git a/.changeset/slow-mugs-matter.md b/.changeset/slow-mugs-matter.md
new file mode 100644
index 0000000..73c26de
--- /dev/null
+++ b/.changeset/slow-mugs-matter.md
@@ -0,0 +1,5 @@
+---
+"gruntend-sdk": patch
+---
+
+safely escaped values can be combined inside quoted attributes while event handlers and tag
diff --git a/examples/sveltekit/src/app.css b/examples/sveltekit/src/app.css
index bca8c0a..65ff7d7 100644
--- a/examples/sveltekit/src/app.css
+++ b/examples/sveltekit/src/app.css
@@ -117,13 +117,19 @@
   html,
   body {
     width: 100%;
+    min-width: 0;
     height: 100%;
     margin: 0;
     padding: 0;
   }
 
+  html {
+    overflow-x: clip;
+  }
+
   body {
-    overflow: auto;
+    overflow-x: clip;
+    overflow-y: auto;
     background: var(--color-surface);
     color: var(--color-text-primary);
     font-family: var(--font-sans);
@@ -138,6 +144,12 @@
     box-sizing: border-box;
   }
 
+  img,
+  svg,
+  video {
+    max-width: 100%;
+  }
+
   a {
     color: inherit;
   }
@@ -885,10 +897,6 @@
   }
 
   @media (max-width: 1000px) {
-    body {
-      overflow: auto;
-    }
-
     .ps-app-shell {
       min-height: 100vh;
       height: auto;
diff --git a/examples/sveltekit/src/lib/components/photoship/AppShell.svelte b/examples/sveltekit/src/lib/components/photoship/AppShell.svelte
index 7c88475..5ec4594 100644
--- a/examples/sveltekit/src/lib/components/photoship/AppShell.svelte
+++ b/examples/sveltekit/src/lib/components/photoship/AppShell.svelte
@@ -58,15 +58,17 @@
   }
 </script>
 
-<div class="flex min-h-screen flex-col bg-[#f7f6f3] text-neutral-900">
+<div
+  class="flex min-h-screen min-w-0 flex-col overflow-x-hidden bg-[#f7f6f3] text-neutral-900"
+>
   <header
     class="border-b border-primary-200 bg-white shadow-[0_1px_0_rgba(245,74,0,0.05)]"
   >
     <div
-      class="mx-auto flex h-16 max-w-6xl items-stretch justify-between px-4 md:px-5"
+      class="mx-auto flex max-w-6xl flex-col px-4 md:h-16 md:flex-row md:items-stretch md:justify-between md:px-5"
     >
       <a
-        class="flex items-center gap-3"
+        class="flex h-14 shrink-0 items-center gap-3 md:h-auto"
         href={`${base}/`}
         aria-label="Juniper home"
       >
@@ -87,10 +89,13 @@
         </span>
       </a>
 
-      <nav class="flex items-stretch gap-2" aria-label="Application navigation">
+      <nav
+        class="grid w-full grid-cols-5 items-stretch border-t border-neutral-100 md:flex md:w-auto md:border-t-0"
+        aria-label="Application navigation"
+      >
         {#each navItems as item}
           <a
-            class={`flex items-center border-b-[3px] px-3 pt-0.5 text-sm font-semibold transition ${
+            class={`flex min-w-0 items-center justify-center border-b-[3px] px-1 py-3 text-[11px] font-semibold transition md:px-3 md:py-0 md:pt-0.5 md:text-sm ${
               isActive(item.href)
                 ? "border-primary-600 text-primary-600"
                 : "border-transparent text-neutral-500 hover:border-primary-600 hover:text-primary-600"
@@ -100,7 +105,7 @@
             {item.label}
             {#if item.count !== undefined}
               <span
-                class="ml-1.5 hidden min-w-5 bg-neutral-100 px-1.5 py-0.5 text-center text-[10px] tabular-nums text-neutral-600 sm:inline-block"
+                class="ml-1.5 hidden min-w-5 bg-neutral-100 px-1.5 py-0.5 text-center text-[10px] tabular-nums text-neutral-600 lg:inline-block"
               >
                 {item.count}
               </span>
@@ -111,7 +116,7 @@
     </div>
   </header>
 
-  <main class="flex-1 px-4 py-5 md:px-5 md:py-6">
+  <main class="min-w-0 flex-1 px-3 py-4 sm:px-4 sm:py-5 md:px-5 md:py-6">
     <div class="mx-auto max-w-6xl">
       {@render children?.()}
     </div>
diff --git a/examples/sveltekit/src/routes/+page.svelte b/examples/sveltekit/src/routes/+page.svelte
index 27cb8e2..b4a0de7 100644
--- a/examples/sveltekit/src/routes/+page.svelte
+++ b/examples/sveltekit/src/routes/+page.svelte
@@ -503,7 +503,7 @@
   <section
     class="overflow-hidden border border-neutral-200 border-t-4 border-t-primary-600 bg-white shadow-sm"
   >
-    <div class="flex flex-col gap-5 px-6 py-6 md:px-8">
+    <div class="flex min-w-0 flex-col gap-5 px-4 py-5 sm:px-6 sm:py-6 md:px-8">
       <div
         class="flex flex-col justify-between gap-5 md:flex-row md:items-start"
       >
@@ -513,32 +513,42 @@
           >
             Restaurant operations
           </p>
-          <h1 class="mt-2 text-3xl font-semibold tracking-tight text-slate-950">
+          <h1
+            class="mt-2 text-2xl font-semibold tracking-tight text-slate-950 sm:text-3xl"
+          >
             What do you want to do?
           </h1>
         </div>
         <dl
-          class="flex divide-x divide-neutral-200 border border-neutral-200 bg-[#faf9f6]"
+          class="grid w-full grid-cols-2 border-l border-t border-neutral-200 bg-[#faf9f6] sm:grid-cols-4 md:w-auto"
         >
-          <div class="min-w-24 px-4 py-2.5">
+          <div
+            class="min-w-0 border-b border-r border-neutral-200 px-3 py-2.5 sm:px-4"
+          >
             <dt class="text-[11px] text-neutral-500">Menus</dt>
             <dd class="mt-0.5 text-lg font-semibold text-slate-950">
               {menuCount ?? "…"}
             </dd>
           </div>
-          <div class="min-w-24 px-4 py-2.5">
+          <div
+            class="min-w-0 border-b border-r border-neutral-200 px-3 py-2.5 sm:px-4"
+          >
             <dt class="text-[11px] text-neutral-500">Items</dt>
             <dd class="mt-0.5 text-lg font-semibold text-slate-950">
               {itemCount ?? "…"}
             </dd>
           </div>
-          <div class="min-w-24 px-4 py-2.5">
+          <div
+            class="min-w-0 border-b border-r border-neutral-200 px-3 py-2.5 sm:px-4"
+          >
             <dt class="text-[11px] text-neutral-500">Orders</dt>
             <dd class="mt-0.5 text-lg font-semibold text-slate-950">
               {orderCount ?? "…"}
             </dd>
           </div>
-          <div class="min-w-24 px-4 py-2.5">
+          <div
+            class="min-w-0 border-b border-r border-neutral-200 px-3 py-2.5 sm:px-4"
+          >
             <dt class="text-[11px] text-neutral-500">Staff</dt>
             <dd class="mt-0.5 text-lg font-semibold text-slate-950">
               {teamCount ?? "…"}
@@ -566,11 +576,11 @@
             placeholder="Move selected dinner items to a new seasonal menu..."
           ></textarea>
           <div
-            class="flex flex-wrap items-center justify-end gap-2 border-t border-neutral-200 bg-[#faf9f6] px-2.5 py-2"
+            class="flex flex-col gap-2 border-t border-neutral-200 bg-[#faf9f6] px-2.5 py-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end"
           >
             <button
               type="button"
-              class="inline-flex h-10 items-center gap-2 border border-neutral-300 bg-white px-3.5 text-sm font-semibold text-slate-700 transition hover:border-primary-500 hover:text-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-wait disabled:opacity-60"
+              class="inline-flex h-10 w-full items-center justify-center gap-2 border border-neutral-300 bg-white px-3.5 text-sm font-semibold text-slate-700 transition hover:border-primary-500 hover:text-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-wait disabled:opacity-60 sm:w-auto"
               disabled={suggestionLoading ||
                 state === "planning" ||
                 state === "running"}
@@ -585,7 +595,7 @@
             </button>
             <button
               type="submit"
-              class="h-10 min-w-24 bg-primary-600 px-5 text-sm font-semibold text-white transition hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-wait disabled:opacity-60"
+              class="h-10 w-full bg-primary-600 px-5 text-sm font-semibold text-white transition hover:bg-primary-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-wait disabled:opacity-60 sm:w-auto sm:min-w-24"
               disabled={state === "planning" || state === "running"}
             >
               {state === "planning"
@@ -644,7 +654,7 @@
       <div class="border-t border-neutral-200 bg-white" aria-live="polite">
         {#if !suggestionLoading && (state === "done" || state === "error")}
           <header
-            class="flex flex-wrap items-center justify-between gap-3 border-b border-neutral-200 bg-[#faf9f6] px-6 py-3 md:px-8"
+            class="flex flex-col items-start gap-2 border-b border-neutral-200 bg-[#faf9f6] px-4 py-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:px-6 md:px-8"
           >
             <h2 class="text-base font-semibold text-slate-950">
               {resultTitle}
@@ -661,7 +671,7 @@
           </header>
         {/if}
 
-        <div class="p-5 md:p-6">
+        <div class="min-w-0 p-4 sm:p-5 md:p-6">
           {#if suggestionLoading || state === "planning" || state === "running"}
             <div class="mx-auto flex max-w-2xl items-start gap-4 py-5">
               <Activity
@@ -670,7 +680,9 @@
                 strokeWidth={2.3}
               />
               <div class="min-w-0 flex-1">
-                <div class="flex items-center justify-between gap-4">
+                <div
+                  class="flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
+                >
                   <p class="text-sm font-semibold text-slate-900">
                     {#if suggestionLoading}
                       Generating a task suggestion
@@ -851,6 +863,9 @@
       opacity: 0.65;
     }
   }
+  :global(.generated-workspace) {
+    min-width: 0;
+  }
   :global(.generated-workspace .surface-card) {
     display: grid;
     gap: 1rem;
@@ -940,7 +955,9 @@
     cursor: pointer;
   }
   :global(.generated-workspace .surface-table) {
+    display: block;
     width: 100%;
+    overflow-x: auto;
     border-collapse: collapse;
     font-size: 0.88rem;
   }
@@ -966,4 +983,17 @@
     font-size: 0.85rem;
     font-weight: 600;
   }
+  @media (max-width: 639px) {
+    :global(.generated-workspace .surface-item) {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    :global(.generated-workspace button),
+    :global(.generated-workspace a.surface-action) {
+      width: 100%;
+      justify-content: center;
+      text-align: center;
+    }
+  }
 </style>
diff --git a/examples/sveltekit/src/routes/customers/+page.svelte b/examples/sveltekit/src/routes/customers/+page.svelte
index 281a6de..15630c1 100644
--- a/examples/sveltekit/src/routes/customers/+page.svelte
+++ b/examples/sveltekit/src/routes/customers/+page.svelte
@@ -48,13 +48,13 @@
   <header
     class="flex flex-col justify-between gap-3 py-1 sm:flex-row sm:items-center"
   >
-    <div class="flex items-center gap-3">
+    <div class="flex min-w-0 items-center gap-3">
       <ContactRound
         class="shrink-0 text-primary-600"
         size={23}
         strokeWidth={2.2}
       />
-      <div>
+      <div class="min-w-0">
         <h1 class="text-xl font-semibold tracking-tight text-slate-950">
           Customers
         </h1>
@@ -98,30 +98,50 @@
       </div>
       {#each visibleCustomers as customer}
         <article
-          class="grid gap-3 border-b border-neutral-100 px-5 py-4 last:border-b-0 sm:grid-cols-[1.3fr_110px_90px_110px_130px] sm:items-center"
+          class="grid gap-3 border-b border-neutral-100 px-4 py-4 last:border-b-0 sm:grid-cols-[1.3fr_110px_90px_110px_130px] sm:items-center sm:px-5"
         >
           <div>
             <h2 class="text-sm font-semibold text-slate-950">
               {customer.name}
             </h2>
-            <p class="mt-0.5 text-xs text-neutral-500">
+            <p class="mt-0.5 break-words text-xs text-neutral-500">
               {customer.email} · since {new Date(
                 customer.createdAt,
               ).toLocaleDateString()}
             </p>
           </div>
-          <span class="text-xs font-semibold capitalize text-primary-700"
-            >{customer.loyaltyTier}</span
-          >
-          <span class="text-sm tabular-nums text-neutral-700"
-            >{customerOrders(customer.customerId).length}</span
-          >
-          <span class="text-sm tabular-nums text-neutral-700"
-            >{reservationCount(customer.customerId)}</span
-          >
-          <strong class="text-sm tabular-nums text-slate-950"
-            >${paidSpend(customer.customerId).toFixed(2)}</strong
-          >
+          <div class="flex items-center justify-between sm:block">
+            <span class="text-xs font-medium text-neutral-500 sm:hidden"
+              >Loyalty</span
+            >
+            <span class="text-xs font-semibold capitalize text-primary-700"
+              >{customer.loyaltyTier}</span
+            >
+          </div>
+          <div class="flex items-center justify-between sm:block">
+            <span class="text-xs font-medium text-neutral-500 sm:hidden"
+              >Orders</span
+            >
+            <span class="text-sm tabular-nums text-neutral-700"
+              >{customerOrders(customer.customerId).length}</span
+            >
+          </div>
+          <div class="flex items-center justify-between sm:block">
+            <span class="text-xs font-medium text-neutral-500 sm:hidden"
+              >Reservations</span
+            >
+            <span class="text-sm tabular-nums text-neutral-700"
+              >{reservationCount(customer.customerId)}</span
+            >
+          </div>
+          <div class="flex items-center justify-between sm:block">
+            <span class="text-xs font-medium text-neutral-500 sm:hidden"
+              >Paid spend</span
+            >
+            <strong class="text-sm tabular-nums text-slate-950"
+              >${paidSpend(customer.customerId).toFixed(2)}</strong
+            >
+          </div>
         </article>
       {:else}
         <p class="p-6 text-sm text-neutral-500">
diff --git a/examples/sveltekit/src/routes/menus/+page.svelte b/examples/sveltekit/src/routes/menus/+page.svelte
index 39b246a..292ad67 100644
--- a/examples/sveltekit/src/routes/menus/+page.svelte
+++ b/examples/sveltekit/src/routes/menus/+page.svelte
@@ -62,9 +62,9 @@
   <header
     class="flex flex-col justify-between gap-3 py-1 sm:flex-row sm:items-center"
   >
-    <div class="flex items-center gap-3">
+    <div class="flex min-w-0 items-center gap-3">
       <BookOpen class="shrink-0 text-primary-600" size={23} strokeWidth={2.2} />
-      <div>
+      <div class="min-w-0">
         <h1 class="text-xl font-semibold tracking-tight text-slate-950">
           Menus and pricing
         </h1>
@@ -125,7 +125,7 @@
       {/each}
     </div>
 
-    <section class="border border-neutral-200 bg-white p-6 shadow-sm">
+    <section class="border border-neutral-200 bg-white p-4 shadow-sm sm:p-6">
       <div class="space-y-2 border-b border-neutral-100 pb-5">
         <h2 class="text-xl font-semibold tracking-tight text-neutral-950">
           {selectedMenu.name}
@@ -140,7 +140,7 @@
 
         {#each visibleItems as item}
           <article
-            class={`flex items-center justify-between gap-4 py-4 ${
+            class={`flex flex-col items-stretch gap-3 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-4 ${
               changedItemIds.has(item.itemId)
                 ? "-mx-3 border-l-4 border-l-emerald-600 bg-emerald-50 px-3"
                 : ""
@@ -164,7 +164,9 @@
                 {item.tags.join(" · ") || "No tags"}
               </p>
             </div>
-            <div class="flex shrink-0 items-center gap-3">
+            <div
+              class="flex shrink-0 items-center justify-between gap-3 sm:justify-end"
+            >
               <strong class="text-sm font-semibold text-primary-700"
                 >${item.price.toFixed(2)}</strong
               >
diff --git a/examples/sveltekit/src/routes/orders/+page.svelte b/examples/sveltekit/src/routes/orders/+page.svelte
index 26c178a..c24cafe 100644
--- a/examples/sveltekit/src/routes/orders/+page.svelte
+++ b/examples/sveltekit/src/routes/orders/+page.svelte
@@ -85,13 +85,13 @@
   <header
     class="flex flex-col justify-between gap-3 py-1 sm:flex-row sm:items-center"
   >
-    <div class="flex items-center gap-3">
+    <div class="flex min-w-0 items-center gap-3">
       <ClipboardList
         class="shrink-0 text-primary-600"
         size={23}
         strokeWidth={2.2}
       />
-      <div>
+      <div class="min-w-0">
         <h1 class="text-xl font-semibold tracking-tight text-slate-950">
           Orders
         </h1>
@@ -147,7 +147,7 @@
     <div class="grid gap-3 lg:grid-cols-2">
       {#each visibleOrders as order}
         <article
-          class={`border bg-white p-4 shadow-sm ${changedOrderIds.has(order.orderId) ? "border-emerald-500 ring-2 ring-emerald-100" : "border-neutral-200"}`}
+          class={`min-w-0 border bg-white p-4 shadow-sm ${changedOrderIds.has(order.orderId) ? "border-emerald-500 ring-2 ring-emerald-100" : "border-neutral-200"}`}
         >
           <div
             class="flex items-start justify-between gap-4 border-b border-neutral-100 pb-3"
@@ -162,7 +162,7 @@
                   >{order.status}</span
                 >
               </div>
-              <p class="mt-1 text-xs text-neutral-500">
+              <p class="mt-1 break-words text-xs text-neutral-500">
                 {order.orderId} · {order.serviceType} · {new Date(
                   order.createdAt,
                 ).toLocaleString()}
@@ -206,9 +206,10 @@
             class="space-y-1 border-t border-neutral-100 pt-3 text-xs text-neutral-600"
           >
             {#each order.lines as line}
-              <li class="flex justify-between gap-4">
-                <span>{line.quantity}× {line.itemName}</span><span
-                  class="tabular-nums"
+              <li class="flex min-w-0 justify-between gap-4">
+                <span class="min-w-0 break-words"
+                  >{line.quantity}× {line.itemName}</span
+                ><span class="tabular-nums"
                   >${(line.unitPrice * line.quantity).toFixed(2)}</span
                 >
               </li>
diff --git a/examples/sveltekit/src/routes/users/+page.svelte b/examples/sveltekit/src/routes/users/+page.svelte
index d7f0a1b..99eaa77 100644
--- a/examples/sveltekit/src/routes/users/+page.svelte
+++ b/examples/sveltekit/src/routes/users/+page.svelte
@@ -35,9 +35,9 @@
 </script>
 
 <section class="space-y-5">
-  <header class="flex items-center gap-3 py-1">
+  <header class="flex min-w-0 items-center gap-3 py-1">
     <UsersRound class="shrink-0 text-primary-600" size={23} strokeWidth={2.2} />
-    <div>
+    <div class="min-w-0">
       <h1 class="text-xl font-semibold tracking-tight text-slate-950">
         Restaurant staff
       </h1>
@@ -65,21 +65,41 @@
       </div>
       {#each users as user}
         <article
-          class="grid gap-2 border-b border-neutral-100 px-5 py-4 last:border-b-0 md:grid-cols-[1.3fr_120px_100px_120px_120px] md:items-center"
+          class="grid gap-3 border-b border-neutral-100 px-4 py-4 last:border-b-0 md:grid-cols-[1.3fr_120px_100px_120px_120px] md:items-center md:px-5"
         >
           <h2 class="text-sm font-semibold text-slate-950">{user.name}</h2>
-          <span class="text-sm font-medium capitalize text-primary-700"
-            >{user.role}</span
-          >
-          <span class="text-sm tabular-nums text-neutral-700"
-            >{assignedOrders(user.userId).length}</span
-          >
-          <span class="text-sm tabular-nums text-neutral-700"
-            >${paidSales(user.userId).toFixed(2)}</span
-          >
-          <span class="text-sm tabular-nums text-neutral-700"
-            >{scheduledHours(user.userId).toFixed(1)}h</span
-          >
+          <div class="flex items-center justify-between md:block">
+            <span class="text-xs font-medium text-neutral-500 md:hidden"
+              >Role</span
+            >
+            <span class="text-sm font-medium capitalize text-primary-700"
+              >{user.role}</span
+            >
+          </div>
+          <div class="flex items-center justify-between md:block">
+            <span class="text-xs font-medium text-neutral-500 md:hidden"
+              >Orders</span
+            >
+            <span class="text-sm tabular-nums text-neutral-700"
+              >{assignedOrders(user.userId).length}</span
+            >
+          </div>
+          <div class="flex items-center justify-between md:block">
+            <span class="text-xs font-medium text-neutral-500 md:hidden"
+              >Paid sales</span
+            >
+            <span class="text-sm tabular-nums text-neutral-700"
+              >${paidSales(user.userId).toFixed(2)}</span
+            >
+          </div>
+          <div class="flex items-center justify-between md:block">
+            <span class="text-xs font-medium text-neutral-500 md:hidden"
+              >Shift hours</span
+            >
+            <span class="text-sm tabular-nums text-neutral-700"
+              >{scheduledHours(user.userId).toFixed(1)}h</span
+            >
+          </div>
         </article>
       {/each}
     </section>
diff --git a/src/ui-runtime.ts b/src/ui-runtime.ts
index 7883358..9a8dd08 100644
--- a/src/ui-runtime.ts
+++ b/src/ui-runtime.ts
@@ -413,28 +413,24 @@ function interpolationContext(
   before: string,
   after: string,
 ): TemplateInterpolationContext {
-  const lastOpen = before.lastIndexOf("<");
-  const lastClose = before.lastIndexOf(">");
-  const inTag = lastOpen > lastClose;
+  if (!endsInsideTag(before)) return { kind: "text" };
 
-  if (!inTag) return { kind: "text" };
-
-  const quotedAttr = before.match(/([:@A-Za-z0-9_-]+)\s*=\s*(["'])$/);
+  const quotedAttr = before.match(/([:@A-Za-z0-9_-]+)\s*=\s*(["'])([^"']*)$/);
   if (quotedAttr) {
     const attr = quotedAttr[1];
     const quote = quotedAttr[2];
-
-    if (after[0] !== quote) return { kind: "structure" };
-
+    const prefix = quotedAttr[3];
     const next = after[1];
-    if (next && next !== ">" && next !== "/" && !/\s/.test(next)) {
-      return { kind: "structure" };
-    }
-
+    const fillsWholeAttribute =
+      prefix.length === 0 &&
+      after[0] === quote &&
+      (!next || next === ">" || next === "/" || /\s/.test(next));
     const lower = attr.toLowerCase();
+
     if (booleanAttributes.has(lower)) return { kind: "structure" };
 
     if (eventAttributes.has(lower)) {
+      if (!fillsWholeAttribute) return { kind: "structure" };
       return {
         kind: "event",
         attribute: attr,
@@ -467,6 +463,29 @@ function interpolationContext(
   return { kind: "attribute", attribute: attr, quoted: false };
 }
 
+function endsInsideTag(value: string): boolean {
+  let inTag = false;
+  let quote = "";
+
+  for (const character of value) {
+    if (!inTag) {
+      if (character === "<") inTag = true;
+      continue;
+    }
+    if (quote) {
+      if (character === quote) quote = "";
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === ">") {
+      inTag = false;
+    }
+  }
+
+  return inTag;
+}
+
 function escapeRegExp(value: string): string {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
diff --git a/tests/ui-runtime.test.ts b/tests/ui-runtime.test.ts
index fdfa914..9f754ad 100644
--- a/tests/ui-runtime.test.ts
+++ b/tests/ui-runtime.test.ts
@@ -63,6 +63,25 @@ test("createUiComponent supports delegated SVG events and closure rerendering",
   );
 });
 
+test("compileUiTemplate supports mixed quoted attribute interpolation", () => {
+  const html = createUiTemplateTag();
+  const width = 720;
+  const height = 280;
+  const period = "this week";
+
+  const compiled = compileUiTemplate(
+    html`<svg
+      viewBox="0 0 ${width} ${height}"
+      role="img"
+      aria-label="Sales ${period}"
+    ></svg>`,
+  ).unwrap();
+
+  expect(compiled.html).toBe(
+    '<svg viewBox="0 0 720 280" role="img" aria-label="Sales this week"></svg>',
+  );
+});
+
 test("compileUiTemplate supports boolean attribute interpolation", () => {
   const html = createUiTemplateTag();
 
@@ -288,6 +307,20 @@ test("compileUiTemplate rejects interpolation that changes tag structure", () =>
   });
 });
 
+test("compileUiTemplate rejects mixed event-handler attributes", () => {
+  const html = createUiTemplateTag();
+
+  const compiled = compileUiTemplate(
+    html`<button onclick="prefix-${() => undefined}">Bad</button>`,
+  );
+
+  expect(Result.isError(compiled)).toBe(true);
+  expect(compiled.unwrapError()).toEqual({
+    code: "unsafe_interpolation",
+    message: "Interpolations cannot change tag or attribute structure.",
+  });
+});
+
 test("compileUiTemplate rejects unsafe tags", () => {
   const html = createUiTemplateTag();