recipe-planner-ui 1.5.0 → 1.6.1

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[513],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32],"dropActive":[32],"draggingId":[32]}]]],["rp-filter-menu.cjs",[[514,"rp-filter-menu",{"label":[1],"options":[16],"selected":[1],"searchPlaceholder":[1,"search-placeholder"],"searchable":[4],"open":[1540],"filterText":[32],"activeIndex":[32]},[[5,"pointerdown","onDocumentPointerDown"],[4,"keydown","onDocumentKeydown"]],{"open":[{"onOpenChange":0}]}]]],["rp-filter-chips_6.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"href":[1],"hrefLabel":[1,"href-label"],"area":[1],"minutes":[2],"favorite":[516],"imageLoading":[32],"imageFailed":[32],"pulsing":[32]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}],[514,"rp-select",{"options":[16],"value":[1025],"label":[1],"placeholder":[1],"open":[1540],"disabled":[516],"compact":[516],"dropUp":[1540,"drop-up"],"activeIndex":[32],"focusControl":[64]},[[5,"pointerdown","onDocumentPointerDown"]],{"open":[{"onOpenChange":0}],"options":[{"onOptionsChange":0}]}]]]], options);
+  return index.bootstrapLazy([["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[513],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32],"dropActive":[32],"draggingId":[32],"pointerKind":[32]}]]],["rp-filter-menu.cjs",[[514,"rp-filter-menu",{"label":[1],"options":[16],"selected":[1],"searchPlaceholder":[1,"search-placeholder"],"searchable":[4],"open":[1540],"filterText":[32],"activeIndex":[32]},[[5,"pointerdown","onDocumentPointerDown"],[4,"keydown","onDocumentKeydown"]],{"open":[{"onOpenChange":0}]}]]],["rp-filter-chips_6.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"href":[1],"hrefLabel":[1,"href-label"],"area":[1],"minutes":[2],"favorite":[516],"imageLoading":[32],"imageFailed":[32],"pulsing":[32]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}],[514,"rp-select",{"options":[16],"value":[1025],"label":[1],"placeholder":[1],"open":[1540],"disabled":[516],"compact":[516],"dropUp":[1540,"drop-up"],"activeIndex":[32],"focusControl":[64]},[[5,"pointerdown","onDocumentPointerDown"]],{"open":[{"onOpenChange":0}],"options":[{"onOptionsChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/recipe-planner-ui.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[513],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32],"dropActive":[32],"draggingId":[32]}]]],["rp-filter-menu.cjs",[[514,"rp-filter-menu",{"label":[1],"options":[16],"selected":[1],"searchPlaceholder":[1,"search-placeholder"],"searchable":[4],"open":[1540],"filterText":[32],"activeIndex":[32]},[[5,"pointerdown","onDocumentPointerDown"],[4,"keydown","onDocumentKeydown"]],{"open":[{"onOpenChange":0}]}]]],["rp-filter-chips_6.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"href":[1],"hrefLabel":[1,"href-label"],"area":[1],"minutes":[2],"favorite":[516],"imageLoading":[32],"imageFailed":[32],"pulsing":[32]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}],[514,"rp-select",{"options":[16],"value":[1025],"label":[1],"placeholder":[1],"open":[1540],"disabled":[516],"compact":[516],"dropUp":[1540,"drop-up"],"activeIndex":[32],"focusControl":[64]},[[5,"pointerdown","onDocumentPointerDown"]],{"open":[{"onOpenChange":0}],"options":[{"onOptionsChange":0}]}]]]], options);
+  return index.bootstrapLazy([["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[513],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32],"dropActive":[32],"draggingId":[32],"pointerKind":[32]}]]],["rp-filter-menu.cjs",[[514,"rp-filter-menu",{"label":[1],"options":[16],"selected":[1],"searchPlaceholder":[1,"search-placeholder"],"searchable":[4],"open":[1540],"filterText":[32],"activeIndex":[32]},[[5,"pointerdown","onDocumentPointerDown"],[4,"keydown","onDocumentKeydown"]],{"open":[{"onOpenChange":0}]}]]],["rp-filter-chips_6.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"href":[1],"hrefLabel":[1,"href-label"],"area":[1],"minutes":[2],"favorite":[516],"imageLoading":[32],"imageFailed":[32],"pulsing":[32]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}],[514,"rp-select",{"options":[16],"value":[1025],"label":[1],"placeholder":[1],"open":[1540],"disabled":[516],"compact":[516],"dropUp":[1540,"drop-up"],"activeIndex":[32],"focusControl":[64]},[[5,"pointerdown","onDocumentPointerDown"]],{"open":[{"onOpenChange":0}],"options":[{"onOptionsChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/rp-day-slot.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CrJlwqe_.js');
 
-const rpDaySlotCss = () => `.sc-rp-day-slot-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.slot.sc-rp-day-slot{display:flex;flex-direction:column;height:100%;min-height:200px;overflow:hidden;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-xs);transition:border-color var(--rp-duration) var(--rp-ease),     box-shadow var(--rp-duration) var(--rp-ease),     background-color var(--rp-duration) var(--rp-ease)}.slot.is-empty.sc-rp-day-slot{background:var(--rp-color-surface-sunken);border-style:dashed}.slot.is-drop-active.sc-rp-day-slot{background:var(--rp-color-highlight-soft);border-style:solid;border-color:var(--rp-color-highlight);box-shadow:var(--rp-shadow-md), inset 0 0 0 1px var(--rp-color-highlight)}.head.sc-rp-day-slot{display:flex;gap:var(--rp-space-1);align-items:center;justify-content:space-between;padding:var(--rp-space-3) var(--rp-space-2) var(--rp-space-3) var(--rp-space-3);border-bottom:1px solid var(--rp-color-border)}.day.sc-rp-day-slot{min-width:0;margin:0;overflow:hidden;font-size:var(--rp-font-size-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;color:var(--rp-color-text-muted)}.head-right.sc-rp-day-slot{display:flex;flex-shrink:0;gap:var(--rp-space-2);align-items:center}.count.sc-rp-day-slot{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:0.6875rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--rp-caramel-600);background:var(--rp-color-highlight-soft);border-radius:var(--rp-radius-pill)}.add.sc-rp-day-slot{display:grid;place-items:center;width:26px;height:26px;padding:0;cursor:pointer;color:var(--rp-color-accent-contrast);background:var(--rp-color-accent);border:none;border-radius:50%;transition:transform var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.add.sc-rp-day-slot svg.sc-rp-day-slot{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.add.sc-rp-day-slot:hover{background:var(--rp-color-highlight);transform:rotate(90deg) scale(1.1)}.add.sc-rp-day-slot:active{transform:rotate(90deg) scale(0.92)}.meals.sc-rp-day-slot{flex:1;margin:0;padding:var(--rp-space-2);list-style:none;display:flex;flex-direction:column;gap:var(--rp-space-2)}.meal.sc-rp-day-slot{position:relative;padding:var(--rp-space-3) var(--rp-space-3) var(--rp-space-2);cursor:grab;touch-action:pan-y;background:var(--rp-color-surface-sunken);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md);transition:transform var(--rp-duration-fast) var(--rp-ease),     box-shadow var(--rp-duration-fast) var(--rp-ease),     opacity var(--rp-duration-fast) var(--rp-ease)}.meal.sc-rp-day-slot:hover{background:var(--rp-color-surface);box-shadow:var(--rp-shadow-sm);transform:translateY(-1px)}.meal.sc-rp-day-slot:active{cursor:grabbing}.meal.is-dragging.sc-rp-day-slot{opacity:0.4;box-shadow:none;transform:none}.grip.sc-rp-day-slot{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-end:var(--rp-space-2);display:block;opacity:0;transition:opacity var(--rp-duration-fast) var(--rp-ease)}.grip.sc-rp-day-slot svg.sc-rp-day-slot{display:block;fill:var(--rp-color-text-subtle)}.meal.sc-rp-day-slot:hover .grip.sc-rp-day-slot{opacity:1}.meal-title.sc-rp-day-slot{display:block;padding-inline-end:var(--rp-space-4);font-size:var(--rp-font-size-sm);font-weight:500;line-height:1.35;color:var(--rp-color-text)}.meal-actions.sc-rp-day-slot{display:flex;gap:var(--rp-space-1);align-items:center;justify-content:space-between;margin-top:var(--rp-space-2)}.move-select.sc-rp-day-slot{min-width:0;position:relative;z-index:1}.meal.sc-rp-day-slot:has(rp-select[open]),.meals.sc-rp-day-slot:has(rp-select[open]){overflow:visible}.slot.sc-rp-day-slot:has(rp-select[open]){overflow:visible}.meal.sc-rp-day-slot:has(rp-select[open]){z-index:3}.remove.sc-rp-day-slot{display:grid;place-items:center;width:24px;height:24px;padding:0;color:var(--rp-color-text-subtle);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm);transition:color var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.remove.sc-rp-day-slot svg.sc-rp-day-slot{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.remove.sc-rp-day-slot:hover{color:var(--rp-color-danger);background:var(--rp-color-danger-soft)}.empty.sc-rp-day-slot{display:flex;flex:1;flex-direction:column;gap:var(--rp-space-2);align-items:center;justify-content:center;padding:var(--rp-space-4) var(--rp-space-3);text-align:center}.empty-icon.sc-rp-day-slot{fill:none;stroke:var(--rp-color-text-subtle);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.empty-text.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-xs);color:var(--rp-color-text-subtle)}.add.sc-rp-day-slot:focus-visible,.remove.sc-rp-day-slot:focus-visible,.move-select.sc-rp-day-slot:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.sr-only.sc-rp-day-slot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (prefers-reduced-motion: reduce){.slot.sc-rp-day-slot,.meal.sc-rp-day-slot,.add.sc-rp-day-slot,.grip.sc-rp-day-slot,.remove.sc-rp-day-slot,.move-select.sc-rp-day-slot{transition:none}.meal.sc-rp-day-slot:hover,.add.sc-rp-day-slot:hover,.add.sc-rp-day-slot:active{transform:none}.grip.sc-rp-day-slot{opacity:1}}`;
+const rpDaySlotCss = () => `.sc-rp-day-slot-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.slot.sc-rp-day-slot{display:flex;flex-direction:column;height:100%;min-height:200px;overflow:hidden;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-xs);transition:border-color var(--rp-duration) var(--rp-ease),     box-shadow var(--rp-duration) var(--rp-ease),     background-color var(--rp-duration) var(--rp-ease)}.slot.is-empty.sc-rp-day-slot{background:var(--rp-color-surface-sunken);border-style:dashed}.slot.is-drop-active.sc-rp-day-slot{background:var(--rp-color-highlight-soft);border-style:solid;border-color:var(--rp-color-highlight);box-shadow:var(--rp-shadow-md), inset 0 0 0 1px var(--rp-color-highlight)}.head.sc-rp-day-slot{display:flex;gap:var(--rp-space-1);align-items:center;justify-content:space-between;padding:var(--rp-space-3) var(--rp-space-2) var(--rp-space-3) var(--rp-space-3);border-bottom:1px solid var(--rp-color-border)}.day.sc-rp-day-slot{min-width:0;margin:0;overflow:hidden;font-size:var(--rp-font-size-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;color:var(--rp-color-text-muted)}.head-right.sc-rp-day-slot{display:flex;flex-shrink:0;gap:var(--rp-space-2);align-items:center}.count.sc-rp-day-slot{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:0.6875rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--rp-caramel-600);background:var(--rp-color-highlight-soft);border-radius:var(--rp-radius-pill)}.add.sc-rp-day-slot{display:grid;place-items:center;width:26px;height:26px;padding:0;cursor:pointer;color:var(--rp-color-accent-contrast);background:var(--rp-color-accent);border:none;border-radius:50%;transition:transform var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.add.sc-rp-day-slot svg.sc-rp-day-slot{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.add.sc-rp-day-slot:hover{background:var(--rp-color-highlight);transform:rotate(90deg) scale(1.1)}.add.sc-rp-day-slot:active{transform:rotate(90deg) scale(0.92)}.meals.sc-rp-day-slot{flex:1;margin:0;padding:var(--rp-space-2);list-style:none;display:flex;flex-direction:column;gap:var(--rp-space-2)}.meal.sc-rp-day-slot{position:relative;padding:var(--rp-space-3) var(--rp-space-3) var(--rp-space-2);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:var(--rp-color-surface-sunken);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md);transition:transform var(--rp-duration-fast) var(--rp-ease),     box-shadow var(--rp-duration-fast) var(--rp-ease),     opacity var(--rp-duration-fast) var(--rp-ease)}.meal.sc-rp-day-slot:hover{background:var(--rp-color-surface);box-shadow:var(--rp-shadow-sm);transform:translateY(-1px)}.meal.sc-rp-day-slot:active{cursor:grabbing}.meal.is-dragging.sc-rp-day-slot{opacity:0.4;box-shadow:none;transform:none}.grip.sc-rp-day-slot{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-end:var(--rp-space-2);display:block;opacity:0;transition:opacity var(--rp-duration-fast) var(--rp-ease)}.grip.sc-rp-day-slot svg.sc-rp-day-slot{display:block;fill:var(--rp-color-text-subtle)}.meal.sc-rp-day-slot:hover .grip.sc-rp-day-slot{opacity:1}.meal-title.sc-rp-day-slot{display:block;padding-inline-end:var(--rp-space-4);font-size:var(--rp-font-size-sm);font-weight:500;line-height:1.35;color:var(--rp-color-text)}.meal-actions.sc-rp-day-slot{display:flex;gap:var(--rp-space-1);align-items:center;justify-content:space-between;margin-top:var(--rp-space-2)}.move-select.sc-rp-day-slot{min-width:0;position:relative;z-index:1;touch-action:manipulation}.remove.sc-rp-day-slot::before{content:'';position:absolute;inset:-9px}.meal.sc-rp-day-slot:has(rp-select[open]),.meals.sc-rp-day-slot:has(rp-select[open]){overflow:visible}.slot.sc-rp-day-slot:has(rp-select[open]){overflow:visible}.meal.sc-rp-day-slot:has(rp-select[open]){z-index:3}.remove.sc-rp-day-slot{display:grid;place-items:center;touch-action:manipulation;position:relative;width:24px;height:24px;padding:0;color:var(--rp-color-text-subtle);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm);transition:color var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.remove.sc-rp-day-slot svg.sc-rp-day-slot{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.remove.sc-rp-day-slot:hover{color:var(--rp-color-danger);background:var(--rp-color-danger-soft)}.empty.sc-rp-day-slot{display:flex;flex:1;flex-direction:column;gap:var(--rp-space-2);align-items:center;justify-content:center;padding:var(--rp-space-4) var(--rp-space-3);text-align:center}.empty-icon.sc-rp-day-slot{fill:none;stroke:var(--rp-color-text-subtle);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.empty-text.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-xs);color:var(--rp-color-text-subtle)}.add.sc-rp-day-slot:focus-visible,.remove.sc-rp-day-slot:focus-visible,.move-select.sc-rp-day-slot:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.sr-only.sc-rp-day-slot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (prefers-reduced-motion: reduce){.slot.sc-rp-day-slot,.meal.sc-rp-day-slot,.add.sc-rp-day-slot,.grip.sc-rp-day-slot,.remove.sc-rp-day-slot,.move-select.sc-rp-day-slot{transition:none}.meal.sc-rp-day-slot:hover,.add.sc-rp-day-slot:hover,.add.sc-rp-day-slot:active{transform:none}.grip.sc-rp-day-slot{opacity:1}}`;
 
 const DaySlot = class {
     constructor(hostRef) {
@@ -33,6 +33,19 @@ const DaySlot = class {
     dropActive = false;
     /** Id of the meal being dragged out of this column, dimmed at its origin. */
     draggingId = null;
+    /**
+     * Which input the user is actually using, which decides whether native HTML5
+     * drag-and-drop is armed at all.
+     *
+     * It starts as `'unknown'` and is set by the first pointer event seen, rather than being
+     * guessed from `navigator.maxTouchPoints` or a media query: a laptop with a touchscreen
+     * answers yes to both while the person is using a mouse, and a tablet with a keyboard
+     * case can be either from one moment to the next. Only an actual event knows.
+     *
+     * Until something is known, native dragging stays on — that is the mouse behaviour, and
+     * a mouse cannot be detected any earlier than its first event either.
+     */
+    pointerKind = 'unknown';
     /**
      * Nested children fire dragleave as the pointer crosses them, so a boolean flag would
      * flicker off mid-column. Counting enter and leave pairs is what makes the state stable.
@@ -54,6 +67,36 @@ const DaySlot = class {
     hoveredPanel = null;
     /** Movement in CSS pixels before a press becomes a drag rather than a tap or a scroll. */
     static DRAG_THRESHOLD = 8;
+    /**
+     * Movement tolerated during the long press before it is abandoned as a scroll.
+     *
+     * A finger resting on a card is never still: holding a phone one-handed produces several
+     * pixels of drift, and a real device reports it. With only `DRAG_THRESHOLD` to go on,
+     * that drift was read as a deliberate vertical swipe and the pending drag was discarded
+     * — the user held, and nothing happened. Every platform's long press allows a slop
+     * radius for exactly this reason; this is ours.
+     */
+    static HOLD_SLOP = 16;
+    /**
+     * How long a finger must rest on a meal before the press becomes a drag.
+     *
+     * A phone lays the week out as a single column, so the day you are dragging to is above
+     * or below — the same axis as scrolling. Distance alone cannot separate the two
+     * intentions on that axis, so time does: hold to drag, swipe to scroll. This is the
+     * long-press convention every mobile reorder UI uses, and it is why the desktop path
+     * needs no equivalent — there the axes already differ.
+     */
+    static LONG_PRESS_MS = 220;
+    /** Distance from a viewport edge, in CSS pixels, within which a drag scrolls the page. */
+    static EDGE_ZONE = 72;
+    /** Peak scroll speed in CSS pixels per frame, reached at the very edge. */
+    static EDGE_SPEED = 14;
+    /** Pending long-press timer, cleared if the finger moves or lifts first. */
+    holdTimer = null;
+    /** Auto-scroll frame handle, active only while a pointer drag is near an edge. */
+    edgeScrollFrame = null;
+    /** Latest pointer position, read by the auto-scroll loop between pointer events. */
+    lastPoint = { x: 0, y: 0 };
     /** Fired when the user asks to add a meal to this day. */
     rpAddMeal;
     /** Fired when a meal is removed from this day. */
@@ -97,6 +140,18 @@ const DaySlot = class {
         this.rpMoveMeal.emit({ id, from, to });
     }
     onDragStart = (event, meal) => {
+        /**
+         * Refuses a native drag that a touch produced.
+         *
+         * Belt and braces alongside clearing `draggable` on pointerdown: some Android builds
+         * evaluate the long press before that clearing is observed. A native drag started by a
+         * touch is unusable here — `dragover` and `drop` are not reliably delivered for one —
+         * and letting it run would cancel the pointer drag that *does* work.
+         */
+        if (this.pointerKind === 'touch') {
+            event.preventDefault();
+            return;
+        }
         this.draggingId = meal.id;
         // A custom MIME type is what lets dragover distinguish a meal from a dragged file or
         // a text selection, so unrelated drags never light up a column as a drop target.
@@ -139,8 +194,9 @@ const DaySlot = class {
     /**
      * Begins tracking a possible pointer drag.
      *
-     * Nothing happens until the pointer has moved past the threshold, so a tap still reaches
-     * the select and the remove button, and a vertical swipe still scrolls the page.
+     * Nothing happens until the finger has either held still for `LONG_PRESS_MS` or moved
+     * past the threshold, so a tap still reaches the select and the remove button, and a
+     * swipe still scrolls the page.
      */
     onPointerDown = (event, meal) => {
         /**
@@ -150,8 +206,22 @@ const DaySlot = class {
          * so the card never dimmed and no drag image appeared even though the drop still
          * worked. The native path is left to own the mouse entirely.
          */
-        if (event.pointerType === 'mouse')
+        if (event.pointerType === 'mouse') {
+            this.pointerKind = 'mouse';
             return;
+        }
+        this.pointerKind = 'touch';
+        /**
+         * Disarms the native drag for *this* gesture, not merely the next render.
+         *
+         * Android Chrome decides whether to start an HTML5 drag during the long press that is
+         * about to happen, and a `@State` change does not reach the DOM until Stencil's next
+         * render — which lands too late to matter. Clearing the attribute directly is what
+         * stops the two drag systems arming from the same press; the state above keeps it off
+         * for every card once the render does catch up.
+         */
+        const card = event.currentTarget;
+        card?.removeAttribute('draggable');
         // A press on the select or a button is that control's, not the start of a drag.
         if (event.target.closest('button, select, label, a, rp-select'))
             return;
@@ -163,26 +233,108 @@ const DaySlot = class {
             startY: event.clientY,
             started: false,
         };
+        this.lastPoint = { x: event.clientX, y: event.clientY };
+        // Holding still is enough to start; `onPointerMove` cancels this if the finger
+        // travels first, which is what keeps a scroll a scroll.
+        this.holdTimer = window.setTimeout(() => {
+            this.holdTimer = null;
+            if (this.pointerDrag)
+                this.beginPointerDrag();
+        }, DaySlot.LONG_PRESS_MS);
         window.addEventListener('pointermove', this.onPointerMove, { passive: false });
         window.addEventListener('pointerup', this.onPointerUp);
         window.addEventListener('pointercancel', this.onPointerCancel);
     };
+    /**
+     * Swallows a context menu raised anywhere while a touch drag is running.
+     *
+     * The element's own handler covers the press that starts the drag, but Android can also
+     * raise the menu from a descendant or once the finger has travelled onto another
+     * element, and either would hijack the touch stream mid-drag.
+     */
+    onContextMenuDuringDrag = (event) => {
+        if (this.pointerDrag?.started)
+            event.preventDefault();
+    };
+    /** Promotes the tracked press into an actual drag. */
+    beginPointerDrag() {
+        const drag = this.pointerDrag;
+        if (!drag || drag.started)
+            return;
+        drag.started = true;
+        this.draggingId = drag.id;
+        /**
+         * Cloned before `draggingId` is applied to the DOM.
+         *
+         * Stencil renders on its own schedule, so at this point the original card has not yet
+         * gained `.is-dragging` — which is what makes it a clean copy rather than a dimmed one.
+         * `.is-dragging` is stripped from the clone regardless, since that ordering is a
+         * detail of the framework rather than a guarantee.
+         */
+        this.createGhost(this.cardFor(drag.id), drag.title);
+        this.moveGhost(this.lastPoint.x, this.lastPoint.y);
+        this.highlightPanelAt(this.lastPoint.x, this.lastPoint.y);
+        this.startEdgeScroll();
+        document.addEventListener('contextmenu', this.onContextMenuDuringDrag, true);
+    }
     onPointerMove = (event) => {
         const drag = this.pointerDrag;
         if (!drag || event.pointerId !== drag.pointerId)
             return;
+        /**
+         * Clamped into the viewport.
+         *
+         * Pointer capture keeps delivering coordinates once a finger passes the edge of the
+         * screen, and on a phone that happens constantly — the days below the fold are reached
+         * by dragging *downwards* past the bottom. Those coordinates hit-test to nothing, so
+         * the highlight would drop out and the release would land on no column at all.
+         *
+         * Clamping keeps the effective point on the last visible row, which is also the row
+         * auto-scrolling is bringing new days into.
+         */
+        this.lastPoint = {
+            x: Math.min(Math.max(event.clientX, 1), window.innerWidth - 1),
+            y: Math.min(Math.max(event.clientY, 1), window.innerHeight - 1),
+        };
         if (!drag.started) {
-            const moved = Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY);
+            const dx = Math.abs(event.clientX - drag.startX);
+            const dy = Math.abs(event.clientY - drag.startY);
+            const moved = Math.hypot(dx, dy);
+            /**
+             * Below the threshold the press is still undecided, and must stay that way.
+             *
+             * A finger resting on a card is never perfectly still — it jitters a few pixels
+             * while the long press runs. Reacting to that jitter is what broke the gesture on a
+             * real device: a wobble of a pixel or two is mostly vertical simply because of how a
+             * phone is held, so the branch below read it as a scroll and tore down the pending
+             * drag. The user held, and nothing ever happened.
+             */
             if (moved < DaySlot.DRAG_THRESHOLD)
                 return;
-            drag.started = true;
-            this.draggingId = drag.id;
-            this.createGhost(drag.title);
+            /**
+             * Past the threshold with the hold still pending, a mainly vertical movement is a
+             * scroll — the axis the page scrolls on. A sideways swipe cannot be a scroll here,
+             * so it starts a drag immediately, which keeps a multi-column layout responsive.
+             *
+             * The slop radius is what distinguishes a swipe from the drift of a finger that is
+             * simply resting. Inside it the hold keeps running; only travel beyond it is a
+             * decision to scroll.
+             */
+            if (dy > dx) {
+                if (moved < DaySlot.HOLD_SLOP)
+                    return;
+                this.scrollFromTouch(event);
+                return;
+            }
+            this.cancelHold();
+            this.beginPointerDrag();
         }
         // Suppresses the page scroll that a touch-move would otherwise produce.
         event.preventDefault();
-        this.moveGhost(event.clientX, event.clientY);
-        this.highlightPanelAt(event.clientX, event.clientY);
+        // The clamped point, not the raw one: a finger past the edge of the screen still has
+        // to highlight the row it is pressing against.
+        this.moveGhost(this.lastPoint.x, this.lastPoint.y);
+        this.highlightPanelAt(this.lastPoint.x, this.lastPoint.y);
     };
     onPointerUp = (event) => {
         const drag = this.pointerDrag;
@@ -190,25 +342,132 @@ const DaySlot = class {
             return;
         const started = drag.started;
         const id = drag.id;
+        /**
+         * Resolved from the last clamped point rather than the release coordinates.
+         *
+         * A finger lifted past the bottom of the screen reports a position outside the
+         * viewport, which hit-tests to nothing — the drop would be discarded even though the
+         * column the user was holding against is obvious. `lastPoint` is that column.
+         */
+        const panel = started ? this.panelAt(this.lastPoint.x, this.lastPoint.y) : null;
         this.endPointerDrag();
         if (!started)
             return;
-        const panel = this.panelAt(event.clientX, event.clientY);
         const to = panel?.getAttribute('day');
         if (to)
             this.emitMove(id, this.day, to);
     };
-    onPointerCancel = () => this.endPointerDrag();
+    /**
+     * A cancelled pointer sequence.
+     *
+     * Once a drag is under way this deliberately does *not* tear it down. On a phone
+     * `pointercancel` is delivered whenever the platform decides some other gesture owns the
+     * touch — a native drag arming, an edge-swipe, the browser's own scroll heuristics — and
+     * treating that as "the user gave up" is what made a drag vanish mid-gesture with the
+     * card left behind. The drag stays live and `pointerup` still resolves it; only a press
+     * that had not yet become a drag is discarded here.
+     */
+    onPointerCancel = () => {
+        if (this.pointerDrag?.started)
+            return;
+        this.endPointerDrag();
+    };
+    /**
+     * Scrolls the page for a swipe that turned out not to be a drag.
+     *
+     * The card sets `touch-action: none`, which it must in order to be draggable at all on
+     * the vertical axis — but that also means the browser will not scroll for this gesture,
+     * so the component has to. The drag is abandoned first, then each subsequent move is
+     * translated into scrolling until the finger lifts, which keeps the swipe continuous
+     * rather than dropping the rest of it.
+     */
+    scrollFromTouch(event) {
+        const startY = this.pointerDrag?.startY ?? event.clientY;
+        let lastY = event.clientY;
+        this.endPointerDrag();
+        window.scrollBy(0, startY - event.clientY);
+        const onMove = (move) => {
+            if (move.pointerId !== event.pointerId)
+                return;
+            window.scrollBy(0, lastY - move.clientY);
+            lastY = move.clientY;
+            move.preventDefault();
+        };
+        const stop = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', stop);
+            window.removeEventListener('pointercancel', stop);
+        };
+        window.addEventListener('pointermove', onMove, { passive: false });
+        window.addEventListener('pointerup', stop);
+        window.addEventListener('pointercancel', stop);
+    }
+    cancelHold() {
+        if (this.holdTimer !== null) {
+            clearTimeout(this.holdTimer);
+            this.holdTimer = null;
+        }
+    }
     endPointerDrag() {
+        this.cancelHold();
+        this.stopEdgeScroll();
+        document.removeEventListener('contextmenu', this.onContextMenuDuringDrag, true);
         this.pointerDrag = null;
         this.draggingId = null;
         this.clearHighlight();
         this.ghost?.remove();
         this.ghost = null;
+        this.el.style.removeProperty('touch-action');
         window.removeEventListener('pointermove', this.onPointerMove);
         window.removeEventListener('pointerup', this.onPointerUp);
         window.removeEventListener('pointercancel', this.onPointerCancel);
     }
+    /**
+     * Scrolls the page while the finger rests near the top or bottom of the viewport.
+     *
+     * On a phone the week is one column tall, so the day being dragged to is usually off
+     * screen — and a finger that is already touching the screen cannot scroll to it, because
+     * that same touch is the drag. Without this the drop target is simply unreachable, which
+     * is exactly the failure that a desktop browser's device emulation hides: its window is
+     * tall enough that every day is visible at once.
+     */
+    startEdgeScroll() {
+        if (this.edgeScrollFrame !== null)
+            return;
+        const step = () => {
+            if (!this.pointerDrag?.started) {
+                this.edgeScrollFrame = null;
+                return;
+            }
+            const y = this.lastPoint.y;
+            const height = window.innerHeight;
+            let delta = 0;
+            if (y < DaySlot.EDGE_ZONE) {
+                delta = -DaySlot.EDGE_SPEED * (1 - y / DaySlot.EDGE_ZONE);
+            }
+            else if (y > height - DaySlot.EDGE_ZONE) {
+                delta = DaySlot.EDGE_SPEED * (1 - (height - y) / DaySlot.EDGE_ZONE);
+            }
+            if (delta !== 0) {
+                const before = window.scrollY;
+                window.scrollBy(0, delta);
+                // Nothing moved, so the page is already at the end — keep the highlight where it
+                // is rather than re-running a hit test that cannot produce a new answer.
+                if (window.scrollY !== before) {
+                    // The page moved under a stationary finger, so what is beneath it has changed.
+                    this.highlightPanelAt(this.lastPoint.x, this.lastPoint.y);
+                }
+            }
+            this.edgeScrollFrame = requestAnimationFrame(step);
+        };
+        this.edgeScrollFrame = requestAnimationFrame(step);
+    }
+    stopEdgeScroll() {
+        if (this.edgeScrollFrame !== null) {
+            cancelAnimationFrame(this.edgeScrollFrame);
+            this.edgeScrollFrame = null;
+        }
+    }
     /** The `rp-day-slot` under a point, found by hit-testing rather than by geometry. */
     panelAt(x, y) {
         // The ghost follows the pointer and would otherwise be the topmost element.
@@ -217,7 +476,36 @@ const DaySlot = class {
         const target = document.elementFromPoint(x, y);
         if (this.ghost)
             this.ghost.style.display = '';
-        return target?.closest('rp-day-slot') ?? null;
+        const hit = target?.closest('rp-day-slot');
+        if (hit)
+            return hit;
+        /**
+         * Hit-testing returns nothing when the point is outside the viewport or lands in the
+         * gap between columns — a finger dragged to the very edge of the screen does both.
+         * Falling back to the nearest panel by geometry means a drop at the edge still lands
+         * somewhere sensible instead of being silently discarded.
+         */
+        return this.nearestPanel(x, y);
+    }
+    nearestPanel(x, y) {
+        let best = null;
+        let bestDistance = Infinity;
+        for (const panel of Array.from(document.querySelectorAll('rp-day-slot'))) {
+            const box = panel.getBoundingClientRect();
+            if (box.width === 0 || box.height === 0)
+                continue;
+            // Zero on either axis whenever the point is already within the panel's span there,
+            // so this measures the gap to the box rather than to its centre.
+            const dx = Math.max(box.left - x, 0, x - box.right);
+            const dy = Math.max(box.top - y, 0, y - box.bottom);
+            const distance = Math.hypot(dx, dy);
+            if (distance < bestDistance) {
+                bestDistance = distance;
+                best = panel;
+            }
+        }
+        // Beyond this the pointer is nowhere near the planner and the drop is not meant for it.
+        return bestDistance <= 64 ? best : null;
     }
     highlightPanelAt(x, y) {
         const panel = this.panelAt(x, y);
@@ -234,18 +522,89 @@ const DaySlot = class {
         this.hoveredPanel?.querySelector('.slot')?.classList.remove('is-drop-active');
         this.hoveredPanel = null;
     }
-    createGhost(title) {
+    /**
+     * The rendered card for one meal id.
+     *
+     * Found by index rather than by a selector: the `<li>` carries no id attribute, and the
+     * order of `.meal` elements is the order of `normalized`, which is what the render walks.
+     */
+    cardFor(id) {
+        const index = this.normalized.findIndex((meal) => meal.id === id);
+        if (index < 0)
+            return null;
+        return this.el.querySelectorAll('.meal')[index] ?? null;
+    }
+    /**
+     * Builds the copy of the card that follows the finger.
+     *
+     * A clone of the real card rather than a label bearing its title. The native drag on a
+     * desktop hands the browser a snapshot of the element itself, so the thing being dragged
+     * looks exactly like the thing that was picked up; a touch drag has to construct that
+     * likeness, and a bare title made the two platforms look like different features.
+     *
+     * The clone is sized to the original because it is positioned out of the flow, where a
+     * percentage width would resolve against the viewport instead of the column.
+     */
+    createGhost(source, title) {
         const ghost = document.createElement('div');
-        ghost.textContent = title;
         ghost.setAttribute('aria-hidden', 'true');
         ghost.className = 'rp-drag-ghost';
+        if (source) {
+            const box = source.getBoundingClientRect();
+            ghost.style.width = `${box.width}px`;
+            const copy = source.cloneNode(true);
+            // The original is dimmed by `.is-dragging`; the copy is the thing being dragged and
+            // must not inherit that, nor the id-based state that belongs to the live card.
+            copy.classList.remove('is-dragging');
+            copy.removeAttribute('draggable');
+            /**
+             * Every cloned custom element is flattened to inert markup.
+             *
+             * A cloned `rp-select` is still an undefined `rp-select` in the registry's eyes, so
+             * appending it to the document upgrades it — Stencil then renders a *second* trigger
+             * inside the one already copied, and the ghost shows two dropdowns. Replacing the
+             * element with a plain `div` carrying the same classes keeps the rendered appearance
+             * while removing anything that can come alive.
+             */
+            for (const custom of Array.from(copy.querySelectorAll('rp-select'))) {
+                const flat = document.createElement('div');
+                flat.className = custom.className;
+                // The trigger is what was visible; the list is closed and contributes nothing.
+                const trigger = custom.querySelector('.trigger');
+                if (trigger)
+                    flat.append(trigger.cloneNode(true));
+                custom.replaceWith(flat);
+            }
+            for (const node of Array.from(copy.querySelectorAll('button, input, select, a'))) {
+                node.style.pointerEvents = 'none';
+                node.setAttribute('tabindex', '-1');
+            }
+            ghost.append(copy);
+        }
+        else {
+            // No element to copy — fall back to the title, which is better than nothing at all.
+            ghost.textContent = title;
+        }
         document.body.append(ghost);
         this.ghost = ghost;
     }
+    /**
+     * Positions the floating copy, keeping it fully on screen.
+     *
+     * The copy is as wide as the card it came from, so following the pointer literally pushes
+     * it off the edge whenever a drag reaches one — and on a phone a drag reaches the bottom
+     * edge on almost every move, because that is how auto-scroll is triggered. Clamping to
+     * the viewport keeps the thing being dragged visible, which is the entire point of it.
+     */
     moveGhost(x, y) {
         if (!this.ghost)
             return;
-        this.ghost.style.transform = `translate(${x}px, ${y}px)`;
+        const box = this.ghost.getBoundingClientRect();
+        // The rule's negative margin offsets the copy up and left of the fingertip; these are
+        // the bounds that keep the result inside the viewport once it is applied.
+        const maxX = window.innerWidth - box.width + 12;
+        const maxY = window.innerHeight - box.height + 44;
+        this.ghost.style.transform = `translate(${Math.min(Math.max(x, 12), Math.max(maxX, 12))}px, ${Math.min(Math.max(y, 44), Math.max(maxY, 44))}px)`;
     }
     onDrop = (event) => {
         const payload = event.dataTransfer?.getData('application/x-rp-meal');
@@ -267,7 +626,38 @@ const DaySlot = class {
         const days = Array.isArray(this.days) ? this.days : [];
         const labels = this.dayLabels ?? {};
         const meals = this.normalized;
-        return (index.h(index.Host, { key: '47e4ac959151a9e43b8398bcbed2df2af827e9f8' }, index.h("section", { key: 'b08414f465303f8015bc3035e3f12994c1868ac8', class: { slot: true, 'is-drop-active': this.dropActive, 'is-empty': meals.length === 0 }, onDragEnter: this.onDragEnter, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, index.h("header", { key: '1b3ab376369ae3339e60740693bcf349ef14a981', class: "head" }, index.h("h3", { key: '077f5818cc37c85110ec831482f6f700ada577dc', class: "day" }, this.dayLabel || this.day), index.h("div", { key: '1fabc2004094d0787d6d734b05d95d825c41c55f', class: "head-right" }, meals.length > 0 && index.h("span", { key: 'af3875556f999563482e8e9ecc833e768515f001', class: "count" }, meals.length), index.h("button", { key: '56f11a2a992f8467d4c876d7ab0771f0f89f31e3', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${(this.dayLabels ?? {})[this.day] || this.dayLabel || this.day}` }, index.h("svg", { key: 'c27fc88bd1ef85ddac15016e21ca140ffd7d0f82', viewBox: "0 0 24 24", width: "15", height: "15", "aria-hidden": "true" }, index.h("path", { key: 'ecde1e8d37b1c6d2abc9a7edc81ec39d09f79d84', d: "M12 5v14M5 12h14" }))))), meals.length === 0 ? (index.h("div", { class: "empty" }, index.h("slot", null, index.h("svg", { class: "empty-icon", viewBox: "0 0 24 24", width: "26", height: "26", "aria-hidden": "true" }, index.h("path", { d: "M4 4h16v16H4z", opacity: "0.35" }), index.h("path", { d: "M8 2v4M16 2v4M4 10h16" })), index.h("p", { class: "empty-text" }, "No meals planned")))) : (index.h("ul", { class: "meals" }, meals.map((meal) => (index.h("li", { class: { meal: true, 'is-dragging': this.draggingId === meal.id }, key: meal.id, draggable: true, onDragStart: (event) => this.onDragStart(event, meal), onPointerDown: (event) => this.onPointerDown(event, meal) }, index.h("span", { class: "grip", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", width: "12", height: "12" }, index.h("circle", { cx: "9", cy: "6", r: "1.4" }), index.h("circle", { cx: "15", cy: "6", r: "1.4" }), index.h("circle", { cx: "9", cy: "12", r: "1.4" }), index.h("circle", { cx: "15", cy: "12", r: "1.4" }), index.h("circle", { cx: "9", cy: "18", r: "1.4" }), index.h("circle", { cx: "15", cy: "18", r: "1.4" }))), index.h("span", { class: "meal-title" }, meal.title), index.h("div", { class: "meal-actions" }, index.h("rp-select", { class: "move-select", compact: true, label: `Move ${meal.title} to another day`, placeholder: "Move\u2026", options: days
+        return (index.h(index.Host, { key: '05ee7eff0f1ff19f77363539f3f5ccf2d1d96efb' }, index.h("section", { key: 'dce7ecf1d85d7d8cd8b988fb6dc06f93810f532a', class: { slot: true, 'is-drop-active': this.dropActive, 'is-empty': meals.length === 0 }, onDragEnter: this.onDragEnter, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, index.h("header", { key: '086dc84dce8943ae814505878fee4dbc1e3acc1a', class: "head" }, index.h("h3", { key: 'a37cb66c77bc30ed80e7eb5d9bbe38c2b2c207b6', class: "day" }, this.dayLabel || this.day), index.h("div", { key: '67e62ed1a5754842f8ffd828ac1ce7cd63a5a666', class: "head-right" }, meals.length > 0 && index.h("span", { key: 'c4460980f7998c355e00ea7d0035297b47a8ecb0', class: "count" }, meals.length), index.h("button", { key: '5d4a5c5fafa9e63cf6cd323b0e23cd6354a18d3b', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${(this.dayLabels ?? {})[this.day] || this.dayLabel || this.day}` }, index.h("svg", { key: '684fc27b7da23ce41a656bc04524b600dec89ee3', viewBox: "0 0 24 24", width: "15", height: "15", "aria-hidden": "true" }, index.h("path", { key: 'c22a9bdbccc3a2fee2f59106371afbfd96c9946f', d: "M12 5v14M5 12h14" }))))), meals.length === 0 ? (index.h("div", { class: "empty" }, index.h("slot", null, index.h("svg", { class: "empty-icon", viewBox: "0 0 24 24", width: "26", height: "26", "aria-hidden": "true" }, index.h("path", { d: "M4 4h16v16H4z", opacity: "0.35" }), index.h("path", { d: "M8 2v4M16 2v4M4 10h16" })), index.h("p", { class: "empty-text" }, "No meals planned")))) : (index.h("ul", { class: "meals" }, meals.map((meal) => (index.h("li", { class: { meal: true, 'is-dragging': this.draggingId === meal.id }, key: meal.id,
+            /**
+             * Only where HTML5 drag-and-drop is the right mechanism — a mouse.
+             *
+             * Android Chrome fires a native `dragstart` on a long press, so leaving
+             * this on unconditionally armed *both* systems from one touch: the
+             * pointer path began its ghost, the native drag then seized the touch
+             * stream and delivered `pointercancel`, which tore that ghost and the
+             * target highlight straight back down. The native drag it left running
+             * has no usable drop target, because a touch-initiated drag does not
+             * reliably deliver `dragover`/`drop` on Android.
+             *
+             * The visible result was a card that could be picked up, showed no
+             * highlight over any day, and refused to drop.
+             */
+            draggable: this.pointerKind !== 'touch', onDragStart: (event) => this.onDragStart(event, meal), onPointerDown: (event) => this.onPointerDown(event, meal),
+            /**
+             * Suppresses Android's long-press context menu.
+             *
+             * The gesture that starts a drag here is the same one the platform uses
+             * to raise its text-selection and link menu. On a card containing a title
+             * and controls that menu appears over the drag, takes the touch stream
+             * with it, and leaves the next tap dismissing the menu rather than
+             * pressing the button it landed on — which is why dragging and the remove
+             * button appeared broken together.
+             *
+             * A desktop right-click is a different gesture and is left alone.
+             */
+            onContextMenu: (event) => {
+                if (this.pointerKind === 'touch')
+                    event.preventDefault();
+            } }, index.h("span", { class: "grip", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", width: "12", height: "12" }, index.h("circle", { cx: "9", cy: "6", r: "1.4" }), index.h("circle", { cx: "15", cy: "6", r: "1.4" }), index.h("circle", { cx: "9", cy: "12", r: "1.4" }), index.h("circle", { cx: "15", cy: "12", r: "1.4" }), index.h("circle", { cx: "9", cy: "18", r: "1.4" }), index.h("circle", { cx: "15", cy: "18", r: "1.4" }))), index.h("span", { class: "meal-title" }, meal.title), index.h("div", { class: "meal-actions" }, index.h("rp-select", { class: "move-select", compact: true, label: `Move ${meal.title} to another day`, placeholder: "Move\u2026", options: days
                 .filter((day) => day !== this.day)
                 .map((day) => ({ value: day, label: labels[day] ?? day })), onRpSelectChange: (event) => this.emitMove(meal.id, this.day, event.detail) }), index.h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, index.h("svg", { viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true" }, index.h("path", { d: "M6 6l12 12M18 6L6 18" }))))))))))));
     }