@luigisbox/luma 0.7.0 → 0.8.0-beta.0

package/src/widgets/convo/template-convo-preview.ts

@@ -0,0 +1,37 @@
+import { html, nothing, repeat } from '../../lit';
+import type { ConvoAction, ConvoPreviewScope } from '../../types';
+import { avatar, icon } from './icons';
+
+const NONE: ConvoAction[] = [];
+
+// The search page's box (`convo.assist`): the assistant's answer to the query
+// above the results, as it streams in: its first lines (fading out), three of
+// its products, its suggestions; "Continue with the assistant" opens the
+// panel with this conversation, a suggestion its next turn.
+export default (s: ConvoPreviewScope) => {
+  const text = s.blocks.find((b) => b.type === 'text');
+  const list = s.blocks.find((b) => Array.isArray(b.products));
+  const rs = list ? s.products(list).slice(0, 3) : [];
+  const chips = s.done ? (s.blocks.find((b) => b.type === 'suggestions')?.actions ?? NONE).filter((a: ConvoAction) => a.action_ref).slice(0, 3) : NONE;
+  return html`
+    <section class="lbx-cv__pv" aria-labelledby="lbx-cv-pv-title" aria-busy=${s.done ? 'false' : 'true'}>
+      <header class="lbx-cv__pv-head">
+        ${avatar}
+        <div class="lbx-cv__titles">
+          <h2 id="lbx-cv-pv-title">${s.t('title')}</h2>
+          <p>${s.t('disclaimer')}</p>
+        </div>
+      </header>
+      <div class="lbx-cv__pv-text lbx-cv__text">${text ? s.md(text.text) : html`<p class="lbx-cv__wait">${s.t('thinking')}</p>`}</div>
+      ${rs.length
+        ? html`<ul class="lbx-cv__list lbx-cv__pv-products" data-lbx-list>
+            ${repeat(rs, (r) => r.id, (r, i) => html`<li>${s.include('convo-result-default', { r, i, actions: NONE })}</li>`)}
+          </ul>`
+        : nothing}
+      <div class="lbx-cv__pv-foot">
+        ${chips.length ? html`<div class="lbx-cv__chips">${chips.map((a: ConvoAction) => html`<button type="button" class="lbx-cv__chip" @click=${(e: Event) => s.open(a, e.currentTarget as Element)}>${a.label}</button>`)}</div>` : nothing}
+        <button type="button" class="lbx-cv__continue" @click=${(e: Event) => s.open(undefined, e.currentTarget as Element)}>${icon('M5 12h14M13 6l6 6-6 6')}${s.t('continue')}</button>
+      </div>
+    </section>
+  `;
+};

package/src/widgets/convo/template-convo-result-default.ts

@@ -0,0 +1,13 @@
+import { html, nothing } from '../../lit';
+import type { ConvoResultScope } from '../../types';
+
+export default ({ r, i, img, plain, price, actions, act }: ConvoResultScope) => html`
+  <a class="lbx-cv__tile" href=${r.c.url}>
+    ${r.c.image ? img(r, i, { sizes: '64px' }) : html`<span class="lbx-img"></span>`}
+    <span class="lbx-cv__info">
+      <span class="lbx-cv__title">${plain(r.c.title)}</span>
+      ${r.c.price ? html`<span class="lbx-cv__price">${price(r.c.price) || plain(r.c.price)}</span>` : nothing}
+    </span>
+  </a>
+  ${actions.map((a) => (a.action_ref ? html`<button type="button" class="lbx-cv__more" aria-label=${`${a.label}: ${plain(r.c.title)}`} @click=${() => act(a)}>${a.label}</button>` : nothing))}
+`;

package/src/widgets/convo/trigger.ts

@@ -0,0 +1,44 @@
+// Luma's sparkle in the site's search field (`convo.trigger`): a button that
+// opens the panel with the phrase typed (main.ts's click listener, which
+// knows it by identity: `created`). In lbx-place with the reconciler that
+// places it (build/vite.mjs), loaded at boot on the pages with it: it waits
+// for the anchor's framework to hydrate, is put back when the host re-renders
+// the field, and stays out of Turbo's snapshots (data-turbo-temporary).
+
+import { addRule } from '../../core/reconciler';
+import { created } from '../../core/own';
+import { schedule } from '../../core/scheduler';
+import { layered, setCss } from '../../core/styles';
+import type { ConvoConfigType, GlobalConfigType } from '../../types';
+
+export const place = (tr: NonNullable<ConvoConfigType['trigger']>, g: GlobalConfigType) => {
+  const b = document.createElement('button');
+  b.type = 'button';
+  b.className = 'lbx-cv-trigger';
+  b.setAttribute('data-lbx', 'convo-trigger');
+  b.setAttribute('data-lbx-convo', '');
+  // Its name too (its only content is an aria-hidden icon), in the site's language where Luma has it.
+  b.title = tr.label ?? ({ cs: 'Zeptat se nákupního asistenta', de: 'Den Einkaufsassistenten fragen' } as Record<string, string>)[(g.locale ?? 'en').split('-')[0]] ?? 'Ask the shopping assistant';
+  created.add(b);
+  // A sparkle (elements, not markup: Trusted Types).
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  path.setAttribute('d', 'M10 3l1.6 4.4L16 9l-4.4 1.6L10 15l-1.6-4.4L4 9l4.4-1.6zM18 13l.9 2.1L21 16l-2.1.9L18 19l-.9-2.1L15 16l2.1-.9z');
+  path.setAttribute('fill', 'currentColor');
+  svg.append(path);
+  b.append(svg);
+  // In @layer lbx: the integration's style-host.css (applied by the entry at boot, before it is
+  // placed) lays it over the field; in flow by default, never over the site's own controls. Its
+  // focus ring !important (a site's reset of outlines loses to it).
+  setCss(
+    'convo:trigger',
+    layered(
+      '.lbx-cv-trigger{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;padding:0;border:1px solid;border-radius:50%;background:none;color:inherit;cursor:pointer}.lbx-cv-trigger svg{width:18px;height:18px}' +
+        '.lbx-cv-trigger:focus-visible{outline:2px solid!important;outline-offset:2px!important}@media (forced-colors:active){.lbx-cv-trigger:focus-visible{outline:3px solid Highlight!important}}',
+    ),
+  );
+  addRule({ id: 'convo-trigger', active: () => true, anchors: [tr.anchor], position: tr.position ?? 'append', create: () => b });
+  schedule();
+};

package/src/widgets/listing/element.ts

@@ -403,7 +403,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
     private hiddenAt = 0;
     /** scrollY when a Back stash was last written (leave()): the page hidden from there is stashed already. */
     private leftAt = -1;
-    private onPageHide = () => {
+    private onPageHide = (e: PageTransitionEvent) => {
       this.hiddenAt = Date.now();
       // Left with more than the first page shown, not by a link of ours (a
       // reload, their menu, the address bar): stashed too, so a reload within
@@ -412,6 +412,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       // shorter than where the shopper was). Into the back/forward cache
       // too: it may be evicted there (then Back is a page load).
       if (restoreOn && (this.last?.page ?? 0) > 1 && this.leftAt !== Math.round(scrollY)) this.leave();
+      // Into the back/forward cache: the browser's restoration on again (instant.ts `holdScroll`).
+      if (e.persisted) releaseScroll();
     };
     /**
      * Restored from the back/forward cache (pageshow, persisted): the page is as
@@ -424,14 +426,13 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      */
     private onPageShow = (e: PageTransitionEvent) => {
       if (!e.persisted) return;
-      // Where the shopper was: the browser's own restoration is off for the
-      // entry (holdScroll), and iOS Safari reads scrollY 0 at this event
-      // even when it restores it. Placed again, then the browser's back on.
+      // Where the shopper was: iOS Safari reads scrollY 0 at this event even
+      // when it restores it. Placed again (the browser's restoration is on
+      // again since pagehide, a host's own setting kept).
       const st = peekStash(location.href);
       dropStash(location.href);
       mark(`${route.id} restored from the back/forward cache`);
-      if (st?.kind === 'back' && st.scroll && tk.state === 'ours') restoreScroll(this, st.scroll, releaseScroll);
-      else releaseScroll();
+      if (st?.kind === 'back' && st.scroll && tk.state === 'ours') restoreScroll(this, st.scroll);
       const away = this.hiddenAt ? Date.now() - this.hiddenAt : 0;
       if (away > BFCACHE_STALE_MS && this.last && this.lastQ && this.lastQ === this.current) this.revalidate(this.lastQ, this.last, new URL(location.href), this.href);
     };

package/src/widgets/listing/instant.ts

@@ -106,8 +106,10 @@ export const restoreScroll = (root: Element, s: Spot, after?: () => void) => {
  * after its render. The browser's restoration ran before it, on a page not
  * grown to the stashed pages yet, and could land after Luma's place too.
  * Only from `auto`: a host that set it (Turbo, a router) keeps its own.
- * Back on (`releaseScroll`) once Luma has placed the page, or when the
- * document moves on within itself (an SPA's navigation: theirs to restore).
+ * Back on (`releaseScroll`) once Luma has placed the page, when the
+ * document moves on within itself (an SPA's navigation: theirs to restore),
+ * or as the page goes into the back/forward cache (restored from memory:
+ * iOS Safari's swipe Back shows the page behind only with it on).
  */
 let ownScroll = false;
 /** Off for this entry, when it is the browser's (or already ours): 1, for the stash's `sr`. */
@@ -121,8 +123,16 @@ export const holdScroll = (): 1 | undefined => {
     return undefined;
   }
 };
-/** A page loaded on an entry Luma turned it off for (the stash's `sr`): Luma's to turn back on. */
-export const adoptScroll = () => void (ownScroll = true);
+/**
+ * A page loaded on an entry Luma turned it off for (the stash's `sr`): Luma's
+ * to turn back on. Off again where it was turned on as the page went into
+ * the back/forward cache (the page evicted from it since): the browser's
+ * restoration stops here, Luma places the page.
+ */
+export const adoptScroll = () => {
+  ownScroll = true;
+  holdScroll();
+};
 /** Back to the browser's, if Luma turned it off. */
 export const releaseScroll = () => {
   if (!ownScroll) return;