orionplace-svelte 0.4.0 → 0.5.0

package/README.md

@@ -134,7 +134,7 @@ imports such as `$app`, `$env` and generated `./$types` retain their own names.
 <!-- components:start (generated by scripts/generate-package-readme-components.mjs) -->
 ## Components
 
-The starter includes **124 storefront components**, copied into
+The starter includes **126 storefront components**, copied into
 `src/lib/components/orionplace/` of your project. Each one has a README in English and Russian
 next to its source that describes its inputs, data and actions.
 
@@ -299,6 +299,8 @@ Journal content and customer contact flows.
 | **Contact details** | `AboutPage` | Display the store’s published company and contact information. |
 | **Contact form** | `ContactForm` | Sending a question to the store. |
 | **Unsubscribe from emails** | `EmailUnsubscribe` | Confirming an unsubscribe request from an email link. |
+| **Privacy policy page** | `StorefrontPrivacy` | The store’s personal data policy with a cookies section and the operator’s details. |
+| **Cookie notice** | `CookieNotice` | A small notice about the necessary cookies with a link to the cookies section of the policy. |
 
 ### Shared interface
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orionplace-svelte",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "SvelteKit 2 storefront for your Orionplace marketplace: setup CLI, server API gateway, typed store and ready-made catalog, cart, checkout and account components in English and Russian, plus an Android app build.",
   "type": "module",
   "license": "MIT",

package/templates/orionplace/COMPONENTS.md

@@ -45,6 +45,8 @@ The storefront uses native Svelte 5 components and SvelteKit server loads.
 | [Currency selector](../src/lib/components/orionplace/currencies/MainCurrencySwitcher.svelte) | Selects the current storefront currency from the available options. |
 | [Event block and promotion enrollment](../src/lib/components/orionplace/events/EventEnrollmentDialog.svelte) | Displaying the event block and opening promotion enrollment from the selected event. |
 | [Storefront events](../src/lib/components/orionplace/events/EventsBlock.svelte) | A full-width carousel of layout-event images for the current storefront language, with responsive image formats. |
+| [Cookie notice](../src/lib/components/orionplace/legal/CookieNotice.svelte) | A small notice about the necessary cookies with a link to the cookies section of the policy. |
+| [Privacy policy page](../src/lib/components/orionplace/legal/StorefrontPrivacy.svelte) | The store’s personal data policy with a cookies section and the operator’s details. |
 | [Language selector](../src/lib/components/orionplace/locale/MainLanguageSwitcher.svelte) | Selects the storefront language and its associated currency and measurement units. |
 | [Manufacturer index](../src/lib/components/orionplace/manufacturers/ManufacturerIndex.svelte) | Manufacturer logos and letter groups. A–Z, А–Я and 0–9 select the alphabet; choosing a name or letter passes the selection to the application. |
 | [Manufacturers and their products](../src/lib/components/orionplace/manufacturers/StorefrontManufacturers.svelte) | Alphabetical index, letter-based lists and manufacturer details. |

package/templates/src/lib/components/orionplace/blog/BlogArticle.README.md

@@ -6,6 +6,8 @@ The article page shows one journal article: its cover, its text, the products at
 
 Article videos may come as the backend's own paths (`/ps3/...`). In an Android app build those paths (cover, videos, images and videos inside the text) load from the storefront address.
 
+The cover and the images of the text open larger: a click, Enter or Space on one opens `ProductReviewImageViewer` at that image, with the article's other images a step away and each image's caption (its `figcaption`, else its `title`, else its `alt`) under it. The images get `role="button"`, a keyboard stop and an «Open image» name; a zoom-in cursor marks them. Images inside a link, a button or a product placement keep their own action. The helper is `src/lib/utils/orionplace/blogImageViewer.ts`.
+
 Source: `src/lib/components/orionplace/blog/BlogArticle.svelte`.
 
 ## Inputs

package/templates/src/lib/components/orionplace/blog/BlogArticle.svelte

@@ -2,6 +2,7 @@
   import { routeHref } from '@/lib/orionplace/navigation.svelte';
   import {
     computed,
+    nextTick,
     onMounted,
     ref,
     watch,
@@ -39,6 +40,16 @@
   import ProductGroup from '@/lib/components/orionplace/products/ProductGroup.svelte';
   import '@/lib/components/orionplace/shared/features.css';
   import OrionplaceEmptyState from '@/lib/components/orionplace/shared/OrionplaceEmptyState.svelte';
+  import ProductReviewImageViewer from '@/lib/components/orionplace/products/ProductReviewImageViewer.svelte';
+  import {
+    blogViewerImage,
+    blogViewerImages,
+    blogViewerIndex,
+    blogViewerPhotos,
+    isBlogViewerOpenKey,
+    markBlogViewerImages,
+  } from '@/lib/utils/orionplace/blogImageViewer';
+  import type { IBlogViewerImage } from '@/lib/utils/orionplace/blogImageViewer';
 
   type Props = {
     postId: number;
@@ -135,6 +146,10 @@
   const task           = useOrionplaceTask();
   const post           = ref<IBlogPost>();
   const article        = ref<HTMLElement>();
+  const coverImage     = ref<HTMLImageElement>();
+  // The cover and the text images open larger in the viewer.
+  const viewerImages   = ref<IBlogViewerImage[]>([]);
+  const viewerStart    = ref(-1);
   const accessChanged  = ref(false);
   const coverFailed    = ref(false);
   const productIds     = ref<number[]>([]);
@@ -285,6 +300,51 @@
     wasShown.value = true;
     showProducts(inputs.initialPost.related_products);
   }
+  function openableImages() {
+    return blogViewerImages([coverImage.value, article.value]);
+  }
+
+  // The text is set with {@html}: its images become buttons after each render.
+  watch(
+    [
+      () => html.value,
+      () => cover.value,
+      () => coverFailed.value,
+      () => mounted.value,
+      () => labels.value.imageOpen,
+      () => post.value?.id,
+    ],
+    () => {
+      void nextTick(() => markBlogViewerImages(openableImages(), labels.value.imageOpen));
+    },
+    { immediate: true },
+  );
+
+  function openViewer(event: Event) {
+    const images = openableImages();
+    const index  = blogViewerIndex(event.target, images);
+    if (index < 0) {
+      return;
+    }
+    event.preventDefault();
+    viewerImages.value = images.map((image) => {
+      const shown = blogViewerImage(image);
+      return image === coverImage.value ? { ...shown, alt: shown.alt || title.value } : shown;
+    });
+    viewerStart.value  = index;
+  }
+
+  function onArticleKeydown(event: KeyboardEvent) {
+    if (isBlogViewerOpenKey(event)) {
+      openViewer(event);
+    }
+  }
+
+  // The viewer gives the focus back to the image that opened it.
+  function closeViewer() {
+    viewerStart.value = -1;
+  }
+
   onMounted(() => {
     mounted.value = true;
     if (!preloaded) {
@@ -337,7 +397,12 @@
   {/if}
 
   {#if post.value}
-    <article class={['op-feature-stack mx-auto w-full max-w-[720px]']}>
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_click_events_have_key_events -->
+    <article
+      class={['op-feature-stack mx-auto w-full max-w-[720px]']}
+      onclick={openViewer}
+      onkeydown={onArticleKeydown}
+    >
       <header class={['op-feature-stack']}>
         <h1
           class={[
@@ -372,6 +437,7 @@
 
         {#if cover.value && !coverFailed.value}
           <img
+            bind:this={coverImage.value}
             src={cover.value}
             alt=""
             width="3"
@@ -575,6 +641,17 @@
       message={labels.value.unavailable}
     />
   {/if}
+  {#if viewerStart.value >= 0 && viewerImages.value.length}
+    <ProductReviewImageViewer
+      images={blogViewerPhotos(viewerImages.value)}
+      index={viewerStart.value}
+      label={labels.value.imageViewer}
+      alt={title.value || labels.value.imageViewer}
+      captions={viewerImages.value.map((image) => image.caption || image.alt)}
+      wide
+      onClose={closeViewer}
+    />
+  {/if}
 </section>
 
 <style>
@@ -787,6 +864,18 @@
     vertical-align: bottom;
   }
 
+  /* Images that open in the viewer. */
+  [data-blog-article-cover][data-blog-image-viewer],
+  .op-feature-prose :global(img[data-blog-image-viewer]) {
+    cursor: zoom-in;
+  }
+
+  [data-blog-article-cover][data-blog-image-viewer]:focus-visible,
+  .op-feature-prose :global(img[data-blog-image-viewer]:focus-visible) {
+    outline: 2px solid var(--orionplace-accent);
+    outline-offset: 3px;
+  }
+
   .op-feature-prose :global(:where(img, video)) {
     display: block;
     max-width: 100%;

package/templates/src/lib/components/orionplace/legal/CookieNotice.README.md

@@ -0,0 +1,23 @@
+# Cookie notice
+
+A small notice about the necessary cookies with a link to the cookies section of the policy.
+
+After mounting, the notice appears at the bottom of the screen until the visitor presses
+OK; the choice is kept in local storage under `orionplace-cookie-notice-seen`. The
+storefront sets only necessary cookies, so the notice asks for no consent. An ordinary
+click on the link calls `onNavigate` with `href`; without it the link opens normally.
+The supplied layout does not show the notice in the Android app build.
+
+Source: `src/lib/components/orionplace/legal/CookieNotice.svelte`.
+
+## Inputs
+
+| Input | Type | Default |
+| --- | --- | --- |
+| `href` | `string` | `'/privacy#cookies'` |
+
+## Callbacks
+
+| Callback | Arguments |
+| --- | --- |
+| `onNavigate` | `[path: string]` |

package/templates/src/lib/components/orionplace/legal/CookieNotice.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { computed, onMounted, ref } from '@/lib/orionplace/reactivity.svelte';
+  import { useOrionplaceSelectionsStore } from '@/lib/stores/orionplaceSelections.svelte';
+  import {
+    COOKIE_NOTICE_STORAGE_KEY,
+    privacyLabels,
+  } from '@/lib/utils/orionplace/privacyLabels';
+  import '@/lib/components/orionplace/shared/features.css';
+
+  // The storefront sets only necessary cookies, so this is a notice, not a
+  // consent form. It appears after mounting and stays away once dismissed.
+  type Props = {
+    href?: string;
+    onNavigate?: (...args: [path: string]) => unknown;
+    [attribute: string]: any;
+  };
+  let {
+    href: input_href = '/privacy#cookies',
+    onNavigate: callback_onNavigate,
+    ...attributes
+  }: Props             = $props();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const labels         = computed(() => privacyLabels(selectionStore.localeCode).cookie);
+  const visible        = ref(false);
+
+  function dismiss() {
+    visible.value = false;
+    try {
+      localStorage.setItem(COOKIE_NOTICE_STORAGE_KEY, '1');
+    } catch {
+      // Without storage the notice comes back on the next visit.
+    }
+  }
+
+  function open(event: MouseEvent) {
+    if (
+      !callback_onNavigate ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey ||
+      event.altKey ||
+      event.button !== 0
+    ) {
+      return;
+    }
+    event.preventDefault();
+    callback_onNavigate(input_href);
+  }
+
+  onMounted(() => {
+    try {
+      visible.value = localStorage.getItem(COOKIE_NOTICE_STORAGE_KEY) !== '1';
+    } catch {
+      visible.value = true;
+    }
+  });
+</script>
+
+{#if visible.value}
+  <div
+    {...attributes}
+    data-feature-part="CookieNotice"
+    role="region"
+    aria-label={labels.value.label}
+    class={[
+      `
+        op-feature fixed inset-x-3 bottom-3 z-40 flex flex-col items-stretch
+        gap-3 border border-solid border-orionplace-border bg-orionplace-surface
+        p-4 shadow-lg sm:left-auto sm:right-5 sm:bottom-5 sm:max-w-[560px]
+        sm:flex-row sm:items-center sm:gap-4
+      `,
+      attributes.class,
+    ]}
+  >
+    <p class={['op-feature-copy op-feature-muted']}>
+      {labels.value.text}
+      <a
+        href={input_href}
+        class={['whitespace-nowrap text-orionplace-text underline underline-offset-2']}
+        onclick={open}>{labels.value.link}</a
+      >
+    </p>
+    <button
+      type="button"
+      class={['op-feature-button op-feature-primary shrink-0']}
+      onclick={dismiss}
+    >
+      {labels.value.ok}
+    </button>
+  </div>
+{/if}

package/templates/src/lib/components/orionplace/legal/StorefrontPrivacy.README.md

@@ -0,0 +1,12 @@
+# Privacy policy page
+
+The store's personal data policy with a cookies section and the operator's details.
+
+The page has no inputs and sends no requests. It lists which data the store receives,
+why, who receives it, how long it is kept, the customer's rights and the cookies the
+site sets; the cookies section has the anchor `#cookies`. The operator block shows the
+company details from the Application Load contact details; empty values are left out.
+The texts are in `src/lib/utils/orionplace/privacyLabels.ts`: a store that adds
+analytics or other cookies lists them there.
+
+Source: `src/lib/components/orionplace/legal/StorefrontPrivacy.svelte`.

package/templates/src/lib/components/orionplace/legal/StorefrontPrivacy.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { computed } from '@/lib/orionplace/reactivity.svelte';
+  import { useOrionplaceStore } from '@/lib/stores/orionplace.svelte';
+  import { useOrionplaceSelectionsStore } from '@/lib/stores/orionplaceSelections.svelte';
+  import { contactLabels } from '@/lib/utils/orionplace/contactLabels';
+  import { privacyLabels } from '@/lib/utils/orionplace/privacyLabels';
+  import '@/lib/components/orionplace/shared/features.css';
+
+  type Props = {
+    [attribute: string]: any;
+  };
+  let { ...attributes }: Props = $props();
+
+  const store                  = useOrionplaceStore();
+  const selectionStore         = useOrionplaceSelectionsStore();
+  const contact                = computed(() => store.init?.contact);
+  const company                = computed(
+    () =>
+      contact.value?.company_legal_name?.trim() ||
+      contact.value?.company_name?.trim() ||
+      '',
+  );
+  const labels                 = computed(() =>
+    privacyLabels(selectionStore.localeCode, company.value),
+  );
+  const fields                 = computed(() => contactLabels(selectionStore.localeCode));
+  // The operator's details as the platform sends them; empty rows are left out.
+  const details                = computed(() =>
+    [
+      [fields.value.legalName, company.value],
+      [fields.value.taxId, contact.value?.company_tax_id],
+      [fields.value.registrationNumber, contact.value?.company_organization_id],
+      [fields.value.address, contact.value?.company_contact_address],
+      [fields.value.phone, contact.value?.company_contact_phone],
+    ]
+      .map(([label, value]) => ({ label: label ?? '', value: value?.trim() ?? '' }))
+      .filter((row) => row.value),
+  );
+</script>
+
+<section
+  {...attributes}
+  data-feature-part="StorefrontPrivacy"
+  class={['op-feature grid w-full @container', attributes.class]}
+>
+  <header
+    class={[
+      `
+        grid gap-3 border-0 border-b border-solid border-orionplace-border mb-8
+        pb-6 @min-[592px]:mb-12 @min-[592px]:pb-8
+      `,
+    ]}
+  >
+    <h1 class={['op-feature-title']}>{labels.value.title}</h1>
+    <p class={['op-feature-copy op-feature-muted max-w-2xl']}>{labels.value.lead}</p>
+  </header>
+
+  <div
+    class={[
+      `
+        grid items-start gap-10
+        @min-[960px]:grid-cols-[minmax(0,3fr)_minmax(0,9fr)] @min-[960px]:gap-16
+      `,
+    ]}
+  >
+    <nav
+      aria-label={labels.value.contents}
+      class={['grid gap-3 @min-[960px]:sticky @min-[960px]:top-6']}
+    >
+      <h2 class={['op-feature-subtitle op-feature-muted']}>{labels.value.contents}</h2>
+      <ol class={['m-0 grid list-none gap-2 p-0']}>
+        {#each labels.value.sections as section (section.id)}
+          <li>
+            <a
+              href={`#${section.id}`}
+              class={[
+                `
+                  text-orionplace-text no-underline outline-none
+                  hover:underline focus-visible:underline
+                `,
+              ]}>{section.title}</a
+            >
+          </li>
+        {/each}
+      </ol>
+    </nav>
+
+    <article class={['grid min-w-0 max-w-3xl gap-8']}>
+      {#each labels.value.sections as section (section.id)}
+        <section id={section.id} class={['grid scroll-mt-6 gap-3']}>
+          <h2 class={['op-feature-subtitle']}>{section.title}</h2>
+          {#each section.text as line, index (index)}
+            <p class={['op-feature-copy']}>{line}</p>
+          {/each}
+        </section>
+      {/each}
+
+      <section id="operator-details" class={['op-feature-panel grid gap-3']}>
+        <h2 class={['op-feature-subtitle']}>{labels.value.operator}</h2>
+        {#if details.value.length}
+          <dl
+            class={['m-0 grid gap-x-6 gap-y-2 @min-[592px]:grid-cols-[auto_1fr]']}
+          >
+            {#each details.value as row (row.label)}
+              <dt class={['op-feature-muted']}>{row.label}</dt>
+              <dd class={['m-0 break-words']}>{row.value}</dd>
+            {/each}
+          </dl>
+        {:else}
+          <p class={['op-feature-copy op-feature-muted']}>
+            {labels.value.operatorUnknown}
+          </p>
+        {/if}
+      </section>
+    </article>
+  </div>
+</section>

package/templates/src/lib/components/orionplace/products/ProductReviewImageViewer.README.md

@@ -4,7 +4,7 @@ The photos of one review, shown large on the same page.
 
 The viewer shows the photos of one review large, on the page the reader opened them from. It receives the photos of that review and the position of the chosen one, and sends no request of its own.
 
-It opens as a dialog over the page, so the browser keeps the focus inside it until it is closed. A sideways swipe on the large photo shows the next or previous one. `StorefrontProduct` opens the product's own photos here: `label` replaces the dialog name and `alt` the photo text.
+It opens as a dialog over the page, so the browser keeps the focus inside it until it is closed. A sideways swipe on the large photo shows the next or previous one. `StorefrontProduct` opens the product's own photos here: `label` replaces the dialog name and `alt` the photo text. `BlogArticle` opens the images of an article with `captions`, a caption under each photo, and `wide`, which lets the viewer use up to 1600px of the screen width instead of 960px and adds full-size zoom: the magnifier button or a click on the image shows it at its own size, scrolling inside the viewer.
 
 Source: `src/lib/components/orionplace/products/ProductReviewImageViewer.svelte`.
 
@@ -16,6 +16,8 @@ Source: `src/lib/components/orionplace/products/ProductReviewImageViewer.svelte`
 | `index` | `number` | 0 |
 | `label` | `string` | «Review photos» |
 | `alt` | `string` | «Review photo» |
+| `captions` | `string[]` | [] |
+| `wide` | `boolean` | false |
 
 ## Callbacks
 

package/templates/src/lib/components/orionplace/products/ProductReviewImageViewer.svelte

@@ -18,11 +18,15 @@
   import OrionplaceImage from '@/lib/components/orionplace/shared/OrionplaceImage.svelte';
 
   // `label` and `alt` name the product's own photos on the product page.
+  // `captions` are shown under each image (blog article images have them);
+  // `wide` lets screenshots and other detailed images use more of the screen.
   type Props = {
     images: IProductFeedbackImage[];
     index?: number;
     label?: string;
     alt?: string;
+    captions?: string[];
+    wide?: boolean;
     onChange?: (...args: [photo: { id: number; index: number }]) => unknown;
     onClose?: (...args: []) => unknown;
     [attribute: string]: any;
@@ -32,6 +36,8 @@
     index: input_index = 0,
     label: input_label,
     alt: input_alt,
+    captions: input_captions = [],
+    wide: input_wide = false,
     onChange: callback_onChange,
     onClose: callback_onClose,
     ...attributes
@@ -49,6 +55,12 @@
     get alt() {
       return input_alt;
     },
+    get captions() {
+      return input_captions;
+    },
+    get wide() {
+      return input_wide;
+    },
   };
   const emit           = (event: string, ...args: any[]) => {
     const handlers: Record<string, ((...args: any[]) => unknown) | undefined> =
@@ -69,6 +81,13 @@
   const active         = ref(startIndex());
   const current        = computed(() => inputs.images[active.value]);
   const several        = computed(() => inputs.images.length > 1);
+  const caption        = computed(() => inputs.captions[active.value]?.trim() ?? '');
+  // A wide viewer can show the image at its own size; the stage then scrolls.
+  const zoomed         = ref(false);
+
+  function toggleZoom() {
+    zoomed.value = inputs.wide && !zoomed.value;
+  }
   // The element that opened the viewer receives the focus back on close.
   let opener: HTMLElement | undefined;
 
@@ -119,7 +138,7 @@
     const start = swipeStart;
 
     swipeStart  = undefined;
-    if (!start || !touch || !several.value) {
+    if (!start || !touch || !several.value || zoomed.value) {
       return;
     }
     select(
@@ -181,6 +200,14 @@
     },
   );
 
+  // Another photo opens fitted to the screen.
+  watch(
+    () => active.value,
+    () => {
+      zoomed.value = false;
+    },
+  );
+
   onMounted(() => {
     if (typeof document === 'undefined') {
       return;
@@ -216,16 +243,17 @@
   class={[
     `
       m-auto box-border h-[calc(100dvh-32px)] max-h-none w-[calc(100vw-32px)]
-      max-w-[960px] overflow-hidden rounded-none p-0 border border-solid
+      overflow-hidden rounded-none p-0 border border-solid
       border-orionplace-border bg-orionplace-surface font-orionplace
       text-orionplace-text backdrop:bg-black/35 backdrop:backdrop-blur-[2px]
     `,
+    inputs.wide ? 'max-w-[1600px]' : 'max-w-[960px]',
     attributes.class,
   ]}
 >
   <div
     class={[
-      '@container/review-image-viewer grid h-full grid-rows-[auto_minmax(0,1fr)_auto]',
+      '@container/review-image-viewer grid h-full grid-rows-[auto_minmax(0,1fr)_auto_auto]',
     ]}
   >
     <header
@@ -245,6 +273,42 @@
       >
         {active.value + 1} / {inputs.images.length}
       </p>
+      {#if inputs.wide}
+        <button
+          type="button"
+          aria-label={zoomed.value ? labels.value.zoomOut : labels.value.zoomIn}
+          aria-pressed={zoomed.value}
+          data-review-image-zoom
+          onclick={toggleZoom}
+          class={[
+            `
+              ml-auto grid h-10 w-10 shrink-0 place-items-center cursor-pointer border-0
+              bg-transparent p-0 text-orionplace-text outline-none
+              transition-colors motion-reduce:transition-none
+              hover:bg-orionplace-hover focus-visible:bg-orionplace-hover
+            `,
+          ]}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            class={['h-5 w-5']}
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            aria-hidden="true"
+          >
+            <circle
+              cx="10.5"
+              cy="10.5"
+              r="6.5"
+            ></circle>
+            <path d="m15.5 15.5 5 5M7.5 10.5h6"></path>
+            {#if !zoomed.value}
+              <path d="M10.5 7.5v6"></path>
+            {/if}
+          </svg>
+        </button>
+      {/if}
       <button
         type="button"
         aria-label={common.value.close}
@@ -269,20 +333,32 @@
           relative flex min-h-0 items-center justify-center p-4
           @min-[606px]/review-image-viewer:px-20 select-none
         `,
-        { 'touch-pan-y': several.value },
+        { 'touch-pan-y': several.value && !zoomed.value },
       ]}
       data-review-image-stage
       ontouchstart={startSwipe}
       ontouchend={endSwipe}
     >
+      <!-- At full size the image scrolls inside the stage; the arrows stay in place. -->
       {#if current.value}
-        {#key current.value.id}
-          <OrionplaceImage
-            src={current.value.image}
-            alt={photoLabel(active.value)}
-            class={['block h-full max-h-full w-full object-contain']}
-          />
-        {/key}
+        <div
+          class={[zoomed.value ? 'absolute inset-0 overflow-auto' : 'contents']}
+          data-review-image-zoomed={zoomed.value || undefined}
+        >
+          {#key current.value.id}
+            <OrionplaceImage
+              src={current.value.image}
+              alt={photoLabel(active.value)}
+              onclick={toggleZoom}
+              class={[
+                zoomed.value
+                  ? 'm-auto block h-auto w-auto max-h-none! max-w-none!'
+                  : 'block h-full max-h-full w-full object-contain',
+                inputs.wide && (zoomed.value ? 'cursor-zoom-out' : 'cursor-zoom-in'),
+              ]}
+            />
+          {/key}
+        </div>
       {/if}
 
       {#if several.value}
@@ -329,6 +405,15 @@
       {/if}
     </div>
 
+    {#if caption.value}
+      <p
+        class={['m-0 px-4 pt-1 pb-3 text-center text-sm leading-6 text-orionplace-muted']}
+        data-review-image-caption
+      >
+        {caption.value}
+      </p>
+    {/if}
+
     {#if several.value}
       <ol
         class={[

package/templates/src/lib/components/orionplace/storefront/StorefrontFooter.svelte

@@ -240,6 +240,18 @@
         >
           {copy.value.contact}
         </a>
+        <a
+          href={route('/privacy')}
+          class={[
+            `
+              w-fit text-sm leading-6 text-orionplace-inverse-text no-underline
+              outline-none hover:text-orionplace-inverse-muted
+              focus-visible:text-orionplace-inverse-muted
+            `,
+          ]}
+        >
+          {copy.value.privacy}
+        </a>
       </nav>
     </div>
     <p

package/templates/src/lib/layouts/StorefrontLayout.svelte

@@ -17,6 +17,8 @@
   import { productActionLabels } from '@/lib/utils/orionplace/productActionLabels';
   import { headerLabels } from '@/lib/utils/orionplace/headerLabels';
   import StorefrontFooter from '@/lib/components/orionplace/storefront/StorefrontFooter.svelte';
+  import CookieNotice from '@/lib/components/orionplace/legal/CookieNotice.svelte';
+  import { APP_ORIGIN } from '@/lib/utils/orionplace/nativeApp';
   import StorefrontHeader from '@/lib/components/orionplace/storefront/StorefrontHeader.svelte';
   import '@/lib/components/orionplace/shared/features.css';
   import { useOrionplaceCartPreview } from '@/lib/composables/useOrionplaceCartPreview.svelte';
@@ -315,6 +317,15 @@
       navigateTo($event);
     }}
   />
+  <!-- The notice is for the website; the Android app links its policy from the store listing. -->
+  {#if !APP_ORIGIN}
+    <CookieNotice
+      href={`/privacy?locale=${encodeURIComponent(store.localeCode)}#cookies`}
+      onNavigate={($event) => {
+        navigateTo($event);
+      }}
+    />
+  {/if}
 </div>
 
 <style>

package/templates/src/lib/utils/orionplace/blogImageViewer.ts

@@ -0,0 +1,84 @@
+/**
+ * The images of a blog article a reader can open larger: the cover and the
+ * pictures of the article text. Images inside a link, a button or a product
+ * placement keep their own click.
+ */
+export interface IBlogViewerImage {
+  src: string;
+  alt: string;
+  caption: string;
+}
+
+/** The images in the shape the photo viewer takes: one entry per image, numbered in order. */
+export function blogViewerPhotos(images: IBlogViewerImage[]) {
+  return images.map((image, index) => ({ id: index + 1, image: image.src }));
+}
+
+const SKIPPED = 'a, button, [data-product-id], [data-product-ids], [data-blog-image-viewer-skip]';
+
+/** The openable images under the given roots, in reading order. */
+export function blogViewerImages(
+  roots: (ParentNode | null | undefined)[],
+): HTMLImageElement[] {
+  const images: HTMLImageElement[] = [];
+  for (const root of roots) {
+    if (!root || typeof root.querySelectorAll !== 'function') {
+      continue;
+    }
+    const found = isImage(root) ? [root] : [...root.querySelectorAll('img')];
+    for (const image of found) {
+      if (typeof image.closest === 'function' && !image.closest(SKIPPED) && imageSource(image)) {
+        images.push(image);
+      }
+    }
+  }
+  return images;
+}
+
+/** What the viewer shows for one image: its address, text and caption. */
+export function blogViewerImage(image: HTMLImageElement): IBlogViewerImage {
+  const caption = image.closest('figure')?.querySelector('figcaption')?.textContent?.trim() ?? '';
+
+  return {
+    src: imageSource(image),
+    alt: image.alt.trim(),
+    caption: caption || image.title.trim(),
+  };
+}
+
+/**
+ * Makes each image a button for keyboard and screen reader users.
+ * `label` names the action, for example «Open image».
+ */
+export function markBlogViewerImages(images: HTMLImageElement[], label: string) {
+  for (const image of images) {
+    image.dataset.blogImageViewer = '';
+    image.tabIndex = 0;
+    image.setAttribute('role', 'button');
+    const name = image.alt.trim();
+    image.setAttribute('aria-label', name ? `${label}: ${name}` : label);
+  }
+}
+
+/** The position of the clicked or focused image in the list, or -1. */
+export function blogViewerIndex(target: EventTarget | null, images: HTMLImageElement[]) {
+  const image = target && typeof (target as Element).closest === 'function'
+    ? (target as Element).closest('img')
+    : null;
+
+  return image ? images.indexOf(image) : -1;
+}
+
+/** A key that opens the focused image. */
+export function isBlogViewerOpenKey(event: KeyboardEvent) {
+  return event.key === 'Enter' || event.key === ' ';
+}
+
+// No `instanceof HTMLImageElement`: the helper also loads where there is no DOM.
+function isImage(node: ParentNode): node is HTMLImageElement {
+  return (node as Element).tagName === 'IMG';
+}
+
+function imageSource(image: HTMLImageElement) {
+  return image.currentSrc || image.getAttribute('src') || '';
+}

package/templates/src/lib/utils/orionplace/blogLabels.ts

@@ -46,6 +46,8 @@ const en            = {
     `${count} ${count === 1 ? 'article' : 'articles'}`,
   subscription: 'Subscription',
   noFiltered: 'No articles match the selected filters.',
+  imageOpen: 'Open image',
+  imageViewer: 'Image viewer',
 };
 
 function russianArticles(count: number) {
@@ -104,6 +106,8 @@ const ru: typeof en = {
   articleCount: (count: number) => `${count} ${russianArticles(count)}`,
   subscription: 'Подписка',
   noFiltered: 'Нет статей по выбранным фильтрам.',
+  imageOpen: 'Открыть изображение',
+  imageViewer: 'Просмотр изображения',
 };
 
 export function blogLabels(locale: string) {

package/templates/src/lib/utils/orionplace/footerLabels.ts

@@ -7,6 +7,7 @@ export function footerLabels(locale: string) {
         manufacturers: 'Производители',
         sections: 'Покупателям',
         contact: 'Контакты',
+        privacy: 'Политика конфиденциальности',
         home: 'На главную',
         profile: 'Личный кабинет',
         journal: 'Журнал',
@@ -23,6 +24,7 @@ export function footerLabels(locale: string) {
         manufacturers: 'Manufacturers',
         sections: 'Discover',
         contact: 'Contact',
+        privacy: 'Privacy policy',
         home: 'Home',
         profile: 'My account',
         journal: 'Journal',

package/templates/src/lib/utils/orionplace/pageSeo.ts

@@ -44,6 +44,11 @@ const pageCopy = {
       'Контакты компании и обратная связь с магазином.',
       'контакты, сообщение',
     ],
+    privacy: [
+      'Политика обработки персональных данных',
+      'Какие данные получает магазин, зачем, кому передаёт, и какие cookie использует сайт.',
+      'персональные данные, политика, cookie',
+    ],
     unsubscribe: [
       'Настройки рассылки',
       'Отписка от писем магазина.',
@@ -166,6 +171,11 @@ const pageCopy = {
       'Company contact details and a message form for the store.',
       'contact, message',
     ],
+    privacy: [
+      'Privacy policy',
+      'Which data the store receives, why, who receives it, and which cookies the site uses.',
+      'personal data, privacy, cookies',
+    ],
     unsubscribe: [
       'Email preferences',
       'Unsubscribe from store emails.',

package/templates/src/lib/utils/orionplace/privacyLabels.ts

@@ -0,0 +1,198 @@
+/*
+ * Texts of the privacy page (/privacy) and the cookie notice.
+ *
+ * The page describes what the storefront itself does: the account, orders,
+ * the two platform cookies and the notice's own storage mark. A store that
+ * adds analytics, chat widgets or other cookies lists them in the cookies
+ * section here. The operator is the store's company from the platform's
+ * contact details; `{company}` in a text is replaced with its name.
+ */
+
+export interface PrivacySection {
+  id: string;
+  title: string;
+  text: string[];
+}
+
+export interface PrivacyLabels {
+  title: string;
+  lead: string;
+  contents: string;
+  operator: string;
+  operatorUnknown: string;
+  sections: PrivacySection[];
+  cookie: {
+    label: string;
+    text: string;
+    link: string;
+    ok: string;
+  };
+}
+
+/** Local storage mark: the visitor has dismissed the cookie notice. */
+export const COOKIE_NOTICE_STORAGE_KEY = 'orionplace-cookie-notice-seen';
+
+const ru: PrivacyLabels = {
+  title: 'Политика обработки персональных данных',
+  lead: 'Какие данные магазин получает, зачем, кому их передаёт и как долго хранит.',
+  contents: 'Содержание',
+  operator: 'Оператор персональных данных',
+  operatorUnknown: 'Реквизиты оператора указаны на странице «Контакты».',
+  sections: [
+    {
+      id: 'operator',
+      title: '1. Кто обрабатывает данные',
+      text: [
+        'Оператор персональных данных — {company} (далее — Магазин). Реквизиты Магазина указаны в конце страницы.',
+        'Обработка ведётся в соответствии с Федеральным законом № 152-ФЗ «О персональных данных».',
+      ],
+    },
+    {
+      id: 'data',
+      title: '2. Какие данные',
+      text: [
+        'Аккаунт: номер телефона, а если вы их укажете — имя, адрес электронной почты, дата рождения и фото.',
+        'Заказы: товары, адреса доставки, имя и телефон получателя, суммы, способ и статус оплаты, возвраты. Данные карты вводятся на странице платёжного провайдера; Магазин номера карт не получает.',
+        'Обращения, отзывы и комментарии, избранное, подписки на товары и история поиска.',
+        'История входов: дата и время, IP-адрес, браузер и тип устройства.',
+      ],
+    },
+    {
+      id: 'purposes',
+      title: '3. Зачем',
+      text: [
+        'Чтобы вы могли войти, оформить, оплатить, получить и вернуть заказ, получить ответ на обращение и опубликовать отзыв; чтобы защищать аккаунт и выполнять требования закона. Письма о новинках и акциях приходят, только если вы их включили.',
+      ],
+    },
+    {
+      id: 'recipients',
+      title: '4. Кому передаются данные',
+      text: [
+        'Только тем, без кого заказ не выполнить, и в нужном объёме: службам доставки, платёжным провайдерам, операторам связи (для кодов подтверждения) и платформе, на серверах которой работает Магазин. Данные не продаются.',
+      ],
+    },
+    {
+      id: 'storage',
+      title: '5. Сколько хранятся',
+      text: [
+        'Пока существует аккаунт. Записи о заказах и платежах хранятся столько, сколько требует закон о бухгалтерском учёте.',
+      ],
+    },
+    {
+      id: 'rights',
+      title: '6. Ваши права',
+      text: [
+        'В профиле можно изменить свои данные, отключить письма и удалить аккаунт. Также можно узнать, какие данные обрабатываются, потребовать их уточнить или удалить и отозвать согласие: напишите в поддержку или на странице «Контакты».',
+      ],
+    },
+    {
+      id: 'cookies',
+      title: '7. Cookie и локальное хранилище',
+      text: [
+        'Сайт использует только необходимые для работы cookie: sessionid сохраняет вход в аккаунт, csrftoken защищает формы от подделки запросов.',
+        'В локальном хранилище браузера сохраняется отметка о том, что вы видели уведомление о cookie. Рекламных и аналитических cookie нет. Если запретить cookie, вход и оформление заказа не будут работать.',
+      ],
+    },
+    {
+      id: 'changes',
+      title: '8. Изменение политики',
+      text: [
+        'Новая редакция действует с момента публикации на этой странице.',
+      ],
+    },
+  ],
+  cookie: {
+    label: 'Уведомление о cookie',
+    text: 'Сайт использует только необходимые cookie: для входа в аккаунт и защиты форм.',
+    link: 'Подробнее',
+    ok: 'Понятно',
+  },
+};
+
+const en: PrivacyLabels = {
+  title: 'Privacy policy',
+  lead: 'Which data the store receives, why, who it shares it with and how long it keeps it.',
+  contents: 'Contents',
+  operator: 'Data controller',
+  operatorUnknown: 'The controller’s details are on the Contact page.',
+  sections: [
+    {
+      id: 'operator',
+      title: '1. Who processes the data',
+      text: [
+        'The data controller is {company} (the Store). The Store’s details are at the end of this page.',
+        'Data is processed under Russian Federal Law No. 152-FZ “On Personal Data”.',
+      ],
+    },
+    {
+      id: 'data',
+      title: '2. Which data',
+      text: [
+        'Account: phone number and, if you add them, name, email address, date of birth and photo.',
+        'Orders: products, delivery addresses, recipient name and phone, amounts, payment method and status, refunds. Card details are entered on the payment provider’s page; the Store does not receive card numbers.',
+        'Support requests, reviews and comments, wishlist, product subscriptions and search history.',
+        'Sign-in history: date and time, IP address, browser and device type.',
+      ],
+    },
+    {
+      id: 'purposes',
+      title: '3. Why',
+      text: [
+        'To let you sign in, place, pay for, receive and return orders, get answers to requests and publish reviews; to protect the account and meet legal duties. News and promotion emails come only if you turned them on.',
+      ],
+    },
+    {
+      id: 'recipients',
+      title: '4. Who receives the data',
+      text: [
+        'Only those needed to fulfil an order, and only as much as they need: delivery services, payment providers, telecom operators (for confirmation codes) and the platform whose servers run the Store. The data is not sold.',
+      ],
+    },
+    {
+      id: 'storage',
+      title: '5. How long it is kept',
+      text: [
+        'While the account exists. Order and payment records are kept as long as accounting law requires.',
+      ],
+    },
+    {
+      id: 'rights',
+      title: '6. Your rights',
+      text: [
+        'In the profile you can change your details, turn emails off and delete the account. You can also ask which data is processed, ask to correct or delete it and withdraw consent: write to support or use the Contact page.',
+      ],
+    },
+    {
+      id: 'cookies',
+      title: '7. Cookies and local storage',
+      text: [
+        'The site uses only the cookies it needs to work: sessionid keeps you signed in, csrftoken protects forms from request forgery.',
+        'The browser’s local storage keeps the fact that you have seen the cookie notice. There are no advertising or analytics cookies. If you block cookies, signing in and checking out do not work.',
+      ],
+    },
+    {
+      id: 'changes',
+      title: '8. Changes to this policy',
+      text: ['A new version applies from its publication on this page.'],
+    },
+  ],
+  cookie: {
+    label: 'Cookie notice',
+    text: 'The site uses only the cookies it needs: to sign you in and to protect forms.',
+    link: 'Learn more',
+    ok: 'OK',
+  },
+};
+
+export function privacyLabels(locale: string, company = ''): PrivacyLabels {
+  const copy = locale.toLowerCase().startsWith('ru') ? ru : en;
+  const name = company || (copy === ru ? 'Магазин' : 'the Store');
+
+  return {
+    ...copy,
+    sections: copy.sections.map((section) => ({
+      ...section,
+      text: section.text.map((line) => line.replaceAll('{company}', name)),
+    })),
+  };
+}

package/templates/src/lib/utils/orionplace/reviewLabels.ts

@@ -47,6 +47,8 @@ const en            = {
   less: 'Less',
   gallery: 'Product images',
   previousImage: 'Previous image',
+  zoomIn: 'Show at full size',
+  zoomOut: 'Fit to screen',
   nextImage: 'Next image',
   thumbnailsBack: 'Show previous thumbnails',
   thumbnailsForward: 'Show next thumbnails',
@@ -124,6 +126,8 @@ const ru: typeof en = {
   less: 'Свернуть',
   gallery: 'Фотографии товара',
   previousImage: 'Предыдущая фотография',
+  zoomIn: 'Показать в полный размер',
+  zoomOut: 'Вписать в экран',
   nextImage: 'Следующая фотография',
   thumbnailsBack: 'Показать предыдущие миниатюры',
   thumbnailsForward: 'Показать следующие миниатюры',

package/templates/src/routes/privacy/+page.server.ts

@@ -0,0 +1,7 @@
+import { loadStorefrontPage } from '@/lib/orionplace/pageServer';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+  const { orionplace } = await event.parent();
+  return loadStorefrontPage(event, orionplace);
+};

package/templates/src/routes/privacy/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { useOrionplaceStore } from '@/lib/stores/orionplace.svelte';
+  import StorefrontPrivacy from '@/lib/components/orionplace/legal/StorefrontPrivacy.svelte';
+  import { useOrionplacePageSeo } from '@/lib/composables/useOrionplacePageSeo.svelte';
+
+  type Props = {
+    [attribute: string]: any;
+  };
+  let { ...attributes }: Props = $props();
+
+  const store                  = useOrionplaceStore();
+  useOrionplacePageSeo('privacy', () => store.localeCode);
+</script>
+
+<main
+  {...attributes}
+  class={[
+    'mx-auto max-w-[1440px] px-4 py-8 sm:px-6 sm:py-10 lg:px-8',
+    attributes.class,
+  ]}
+>
+  <StorefrontPrivacy />
+</main>