Skip to content

fix: support mixed interpolation in quoted attributes #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siddarthvader merged 2 commits into from
Jul 14, 2026
Merged

fix: support mixed interpolation in quoted attributes #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e675749
fix: support mixed interpolation in quoted attributes
siddarthvader Jul 14, 2026
7bb153f
format
siddarthvader Jul 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/slow-mugs-matter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"gruntend-sdk": patch
---

safely escaped values can be combined inside quoted attributes while event handlers and tag
18 changes: 13 additions & 5 deletions examples/sveltekit/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -138,6 +144,12 @@
box-sizing: border-box;
}

img,
svg,
video {
max-width: 100%;
}

a {
color: inherit;
}
Expand Down Expand Up @@ -885,10 +897,6 @@
}

@media (max-width: 1000px) {
body {
overflow: auto;
}

.ps-app-shell {
min-height: 100vh;
height: auto;
Expand Down
19 changes: 12 additions & 7 deletions examples/sveltekit/src/lib/components/photoship/AppShell.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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>
Expand Down
56 changes: 43 additions & 13 deletions examples/sveltekit/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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 ?? "…"}
Expand Down Expand Up @@ -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"}
Expand All @@ -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"
Expand Down Expand Up @@ -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}
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -851,6 +863,9 @@
opacity: 0.65;
}
}
:global(.generated-workspace) {
min-width: 0;
}
:global(.generated-workspace .surface-card) {
display: grid;
gap: 1rem;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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>
52 changes: 36 additions & 16 deletions examples/sveltekit/src/routes/customers/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
12 changes: 7 additions & 5 deletions examples/sveltekit/src/routes/menus/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand All @@ -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"
: ""
Expand All @@ -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
>
Expand Down
Loading
Loading