@ecomconsult/consentkit 0.5.13 → 0.5.15

package/src/ck-ui.js

@@ -5,6 +5,18 @@
 (function () {
   'use strict';
 
+  /* SPEC §1.9 — the second copy of ck.js on the page draws nothing.
+     Two snippets each load the whole bundle, so this file runs twice. Every
+     copy is its own IIFE with its own `mounted` flag, so a second copy would
+     register a second set of ck:* listeners and mount a second banner into the
+     same #ck-root — the first copy's, which it cannot see. ck-core.js stands
+     down for the same reason; this is the UI half of it.
+     SSR-safe: with no window we behave exactly as before and fall through. The
+     flag is claimed further down, after the `typeof document` guard, so a copy
+     that only ever published the pure `_contrast` helpers into a DOM-less
+     context does not lock out a later copy that could actually render. */
+  if (typeof window !== 'undefined' && window.__ckUiLoaded) { return; }
+
   var OPT_IN = ['functional', 'analytics', 'marketing'];
   var ALL_CATS = ['necessary'].concat(OPT_IN);
 
@@ -21,6 +33,15 @@
       bannerLabel: 'Cookie consent',
       panelTitle: 'Cookie settings',
       panelIntro: 'Choose what to allow. By default only the necessary ones are on.',
+      /* SPEC V1.16 §1.2 — the «Additional information» card at the foot of the
+         panel: who the operator is, where to write, how long an answer takes,
+         where to complain. The HEADING has a real translation in every locale;
+         the BODY is deliberately empty in every dictionary, because the block
+         renders only when the site actually supplies text. A default sentence
+         here would put an empty operator card on every site that never
+         configured one. */
+      extraTitle: 'Additional information',
+      extraText: '',
       save: 'Save choices',
       close: 'Close',
       alwaysOn: 'always on',
@@ -89,6 +110,10 @@
       bannerLabel: 'Согласие на cookie',
       panelTitle: 'Настройки cookie',
       panelIntro: 'Выберите, что разрешить. По умолчанию включено только необходимое.',
+      // SPEC V1.16 §1.2. Заголовок переведён везде, тело пустое везде — см.
+      // комментарий у en выше.
+      extraTitle: 'Дополнительно',
+      extraText: '',
       save: 'Сохранить выбор',
       close: 'Закрыть',
       alwaysOn: 'всегда активны',
@@ -157,7 +182,16 @@
     // group's own one. Both are plain strings, so they belong here: a key left
     // out of this list is `undefined` for all 32 external locales and renders
     // the literal word "undefined" on the card.
-    'svcDetails', 'svcListLabel'
+    'svcDetails', 'svcListLabel',
+    /* SPEC V1.16 §1.2 — the «Дополнительно» card. Both belong here for the
+       usual reason (a DICT key missing from this list is `undefined` for all 32
+       external locales), but they behave differently on purpose:
+
+         extraTitle — translated everywhere, so every locale has a heading.
+         extraText  — '' in every dictionary. The merge line below keeps '' when
+                      the locale supplies nothing, and the panel treats '' as
+                      «no block». Only config.texts.<lang>.extraText fills it. */
+    'extraTitle', 'extraText'
   ];
 
   // Plural-form keys, filled separately from STR_KEYS (see above).
@@ -248,13 +282,74 @@
     return list[idx].replace('{n}', String(n));
   }
 
-  // Deep two-level fill from en: a partial locale must never yield undefined,
-  // which would render the literal string "undefined".
-  function buildStrings(lang, table) {
+  /* SPEC V1.16 §1.1 — per-language dictionary overrides from the CONFIG.
+
+     `config.texts` is a mixed bag: it has carried `policyUrl`, `detailsAction`,
+     `declarationUrl` and `cabinetUrl` since 0.5.0, and 0.5.15 adds `links`. So a
+     key is a language dictionary only when it LOOKS like a language tag — that
+     regex is the whole separation, and it is why no future scalar setting under
+     `texts` can ever be mistaken for one (none of them is two letters).
+
+     Own properties only, and the value must be a plain object: `texts` is
+     author-supplied JSON that may have been merged over a prototype, and
+     reading an inherited key would hand the merge below a function. */
+  var LANG_KEY_RE = /^[a-z]{2}(-[a-z]{2})?$/;
+
+  function configTexts(cfg, code) {
+    var texts = (cfg && cfg.texts && typeof cfg.texts === 'object' && !Array.isArray(cfg.texts))
+      ? cfg.texts : null;
+    if (!texts) return null;
+    var k = String(code || '').toLowerCase();
+    if (!LANG_KEY_RE.test(k)) return null;
+    if (!Object.prototype.hasOwnProperty.call(texts, k)) return null;
+    var v = texts[k];
+    return (v && typeof v === 'object' && !Array.isArray(v)) ? v : null;
+  }
+
+  /* The keys an override may reach. A WHITELIST, not «whatever the object
+     carries»: an operator writing their own banner copy has no business
+     rewriting «Принять всё» (the button labels are what a visitor recognises
+     across sites) or the plural tables (an array here would break plural()).
+     `cat.<name>.title/desc` is handled separately below, one level deeper. */
+  var OVERRIDE_KEYS = [
+    'bannerTitle', 'bannerText', 'panelTitle', 'panelIntro', 'extraTitle', 'extraText'
+  ];
+
+  // A non-empty string wins; empty or missing falls through to the layer below.
+  // That is what makes an empty field in the cabinet mean «take the dictionary»
+  // rather than «render nothing».
+  function pickOverride(src, key) {
+    if (!src) return null;
+    if (!Object.prototype.hasOwnProperty.call(src, key)) return null;
+    var v = src[key];
+    return (typeof v === 'string' && v) ? v : null;
+  }
+
+  /* Deep two-level fill from en: a partial locale must never yield undefined,
+     which would render the literal string "undefined".
+
+     Three layers as of 0.5.15: builtin DICT <- window.__ckLocales (both already
+     folded into `table`) <- config.texts[lang]. `cfg` is OPTIONAL on purpose —
+     placeholderText() and the cabinet's own calls ask for the plain dictionary,
+     and an absent third argument must build exactly what 0.5.14 built. */
+  function buildStrings(lang, table, cfg) {
     var src = table[lang] || {};
     var base = DICT.en;
     var out = {};
     var i, c;
+
+    /* Exact code first, then the two-letter base of the RESOLVED language:
+       a banner that resolved to `pt-br` takes `texts['pt-br']` over
+       `texts['pt']`, and a site that only wrote `texts.pt` still reaches it.
+       Same shape as resolveLang(), so the override follows the banner. */
+    var code = String(lang || '').toLowerCase();
+    var ov = configTexts(cfg, code);
+    var ovBase = (code.length > 2) ? configTexts(cfg, code.slice(0, 2)) : null;
+
+    function override(key) {
+      return pickOverride(ov, key) || pickOverride(ovBase, key);
+    }
+
     for (i = 0; i < STR_KEYS.length; i++) {
       var k = STR_KEYS[i];
       out[k] = (typeof src[k] === 'string' && src[k]) ? src[k] : base[k];
@@ -278,9 +373,309 @@
         desc: (typeof e.desc === 'string' && e.desc) ? e.desc : base.cat[c].desc
       };
     }
+
+    /* SPEC V1.16 §1.1 — the config layer, applied LAST so it wins over both the
+       builtin dictionary and __ckLocales. Only the whitelisted keys, and only
+       non-empty strings: an override that is absent, empty or not a string
+       leaves whatever the two lower layers produced.
+
+       Nothing here is ever treated as HTML. These strings go through el()'s
+       textContent and (for extraText) renderRich(), which builds nodes with
+       createElement/createTextNode — an author who writes «<b>» sees the
+       characters «<b>», which is the contract the server's validator mirrors. */
+    if (ov || ovBase) {
+      for (i = 0; i < OVERRIDE_KEYS.length; i++) {
+        var ok = OVERRIDE_KEYS[i];
+        var hit = override(ok);
+        if (hit) out[ok] = hit;
+      }
+      // cat.<name>.title / cat.<name>.desc, one level deeper. Read from a
+      // `cat` object on the override, with the same exact-then-base chain.
+      var ovCat = (ov && ov.cat && typeof ov.cat === 'object') ? ov.cat : null;
+      var ovBaseCat = (ovBase && ovBase.cat && typeof ovBase.cat === 'object') ? ovBase.cat : null;
+      for (i = 0; i < ALL_CATS.length; i++) {
+        c = ALL_CATS[i];
+        var oe = (ovCat && ovCat[c] && typeof ovCat[c] === 'object') ? ovCat[c] : null;
+        var obe = (ovBaseCat && ovBaseCat[c] && typeof ovBaseCat[c] === 'object') ? ovBaseCat[c] : null;
+        var t = pickOverride(oe, 'title') || pickOverride(obe, 'title');
+        var d = pickOverride(oe, 'desc') || pickOverride(obe, 'desc');
+        if (t) out.cat[c].title = t;
+        if (d) out.cat[c].desc = d;
+      }
+    }
+    return out;
+  }
+
+  /* ------------------------------------------ rich text (SPEC V1.16 §1.2) */
+
+  /* The tiny markup subset the «Дополнительно» block accepts. It exists because
+     an operator block is genuinely structured text — two or three paragraphs, a
+     bold e-mail address, a link to the supervisory authority — and because the
+     alternative (accepting HTML) would mean sanitising author HTML in the
+     browser, which is a class of bug we are not going to own.
+
+     THE RULES, in the order they are applied. The server's validator mirrors
+     this exactly, so the order is part of the contract, not an implementation
+     detail:
+
+       1. A blank line (two newlines, any surrounding spaces) splits paragraphs.
+          Each paragraph becomes one <p>.
+       2. Inside a paragraph, a single newline becomes <br>.
+       3. LINKS ARE TOKENISED FIRST, before anything else looks at the text:
+            [label](URL)   with URL http(s):// or mailto:
+            a bare https?:// URL
+            a bare e-mail address
+          Link-first is not a preference — it is what stops the bare-URL rule
+          from eating the address inside «[Центр](https://datepersonale.md)»
+          and stops the bare-e-mail rule from firing inside a mailto: label.
+       4. `**bold**` is applied only to the TEXT RUNS BETWEEN links. So bold does
+          not nest inside a link label and a link does not appear inside bold —
+          one pass, no nesting, nothing recursive to get wrong.
+       5. Any other URL scheme in [label](…) — javascript:, data:, file: — is
+          NOT a link. The WHOLE literal «[label](javascript:…)» is rendered as
+          plain text: visibly wrong to whoever wrote it, rather than silently
+          dropping the address and leaving a label that looks like a link.
+       6. There is no HTML. «<b>» is five characters of text, always.
+
+     Returns an ARRAY of nodes, so the caller decides where they go. Pure apart
+     from document.createElement, which is what makes «no innerHTML» mechanical
+     rather than a promise. */
+
+  // [label](url) — the label may not contain brackets, the url may not contain
+  // whitespace or a closing paren. Deliberately strict: an address that needs
+  // an escaped paren is an address that belongs in a plain bare-URL run.
+  var MD_LINK_RE = /\[([^\]\[]+)\]\(([^()\s]+)\)/;
+  var BARE_URL_RE = /https?:\/\/[^\s<>()\[\]"']+[^\s<>()\[\]"'.,;:!?]/;
+  // Simple on purpose: an address that this misses renders as plain text, which
+  // is a worse link, not a security hole. Anything clever here is a false
+  // positive waiting to turn a sentence into a mailto:.
+  var BARE_MAIL_RE = /[A-Za-z0-9._%+-]+@[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)+/;
+
+  // http(s) for an outbound link, mailto: for an address. Everything else is
+  // refused — a javascript: or data: URL in a control the visitor is invited to
+  // click is the XSS vector resolveDetails() already refuses for policyUrl.
+  function richHref(url) {
+    var u = str(url);
+    if (!u) return null;
+    if (/^https?:\/\//i.test(u)) return u;
+    if (/^mailto:[^\s]+@[^\s]+$/i.test(u)) return u;
+    return null;
+  }
+
+  function richLink(label, href) {
+    var a = el('a', 'ck-rich__link', label);
+    a.href = href;
+    a.target = '_blank';
+    a.rel = 'noopener';
+    return a;
+  }
+
+  /* `**bold**` over a plain run. Non-greedy and never across a newline, so an
+     unclosed «**» is two literal asterisks rather than a bold tail that
+     swallows the rest of the paragraph. */
+  var BOLD_RE = /\*\*([^*\n]+)\*\*/;
+
+  /* PASS 3 — bare addresses inside one run of plain text. Runs LAST, on text
+     that no longer contains any [label](url), so it cannot reach inside one. */
+  function richBare(text, out) {
+    var rest = String(text);
+    while (rest) {
+      var url = BARE_URL_RE.exec(rest);
+      var mail = BARE_MAIL_RE.exec(rest);
+      // Whichever address starts first. A URL wins a tie: «https://a@b.md» is
+      // an address with a userinfo part, not an e-mail sitting after a scheme.
+      var m = null, isMail = false;
+      if (url) { m = url; }
+      if (mail && (!m || mail.index < m.index)) { m = mail; isMail = true; }
+      if (!m) { out.push(document.createTextNode(rest)); return; }
+      if (m.index > 0) out.push(document.createTextNode(rest.slice(0, m.index)));
+      out.push(richLink(m[0], isMail ? ('mailto:' + m[0]) : m[0]));
+      rest = rest.slice(m.index + m[0].length);
+    }
+  }
+
+  /* PASS 2 — `**bold**` over one run of text, then PASS 3 inside each half.
+
+     Bold has to come BEFORE the bare-address rules, not after: «**mail@x.md**»
+     is one bold run containing an address, and a pass that linked the address
+     first would split the run in three and leave BOLD_RE looking at «**» and
+     «**» separately — the asterisks would survive on screen. That is the whole
+     reason these are three ordered passes rather than one left-to-right walk. */
+  function richBold(text, out) {
+    var rest = String(text);
+    var m;
+    while ((m = BOLD_RE.exec(rest))) {
+      if (m.index > 0) richBare(rest.slice(0, m.index), out);
+      var strong = el('strong', null);
+      var inner = [];
+      richBare(m[1], inner);            // an address inside bold is still a link
+      for (var i = 0; i < inner.length; i++) strong.appendChild(inner[i]);
+      out.push(strong);
+      rest = rest.slice(m.index + m[0].length);
+    }
+    if (rest) richBare(rest, out);
+  }
+
+  /* PASS 1 — one line of a paragraph -> nodes.
+
+     `[label](url)` is tokenised first and its pieces never reach passes 2 and 3:
+     that is what stops the bare-URL rule from eating the address inside the
+     parens, stops the bare-e-mail rule from firing inside a mailto: label, and
+     leaves a label's own «**» literal (rule 4 of the contract). The text
+     BETWEEN markdown links goes through richBold(), which then runs richBare()
+     inside and outside each bold span. */
+  function richLine(line, out) {
+    var rest = String(line);
+    var m;
+    while ((m = MD_LINK_RE.exec(rest))) {
+      if (m.index > 0) richBold(rest.slice(0, m.index), out);
+      var href = richHref(m[2]);
+      // Rule 5: a refused scheme is the whole literal, verbatim and unbolded,
+      // so «[x](javascript:alert(1))» reads as exactly what was written.
+      if (href) out.push(richLink(m[1], href));
+      else out.push(document.createTextNode(m[0]));
+      rest = rest.slice(m.index + m[0].length);
+    }
+    if (rest) richBold(rest, out);
+  }
+
+  /* text -> array of <p> nodes. Empty (or non-string) input gives an empty
+     array, which is what lets the caller say «no text, no block» by asking for
+     the length rather than by re-testing the string. */
+  function renderRich(text) {
+    var s = (typeof text === 'string') ? text : '';
+    if (!s.trim()) return [];
+    // \r\n and \r normalised first: a value pasted from Windows or copied out of
+    // a textarea must split into the same paragraphs as one typed here.
+    var paras = s.replace(/\r\n?/g, '\n').split(/\n[ \t]*\n+/);
+    var out = [];
+    for (var i = 0; i < paras.length; i++) {
+      var para = paras[i].replace(/^\n+|\n+$/g, '');
+      if (!para.trim()) continue;
+      var p = el('p', 'ck-rich__p');
+      var lines = para.split('\n');
+      for (var j = 0; j < lines.length; j++) {
+        if (j > 0) p.appendChild(el('br'));       // rule 2: a single newline
+        var nodes = [];
+        richLine(lines[j], nodes);
+        for (var k = 0; k < nodes.length; k++) p.appendChild(nodes[k]);
+      }
+      out.push(p);
+    }
+    return out;
+  }
+
+  /* ------------------------------------------ banner links (SPEC V1.16 §1.3) */
+
+  /* `texts.links` — up to three of the operator's own addresses, rendered under
+     the banner buttons and at the foot of the settings panel. The obvious pair
+     is «Политика конфиденциальности» and «Политика cookie», which a Moldovan
+     site is required to publish and which have nowhere else to go on the card.
+
+     Deliberately NOT tangled with `detailsAction`: «Подробнее» keeps doing
+     exactly what it did in 0.5.14, because a site that gains a link row must
+     not silently lose the link it already had.
+
+     A row is skipped, never faked, when its address is not http(s) or when no
+     label resolves for the banner's language — a link with no words on it is
+     not a link. The cap is applied to the SURVIVORS: one malformed row must not
+     cost a good one its place. */
+  function linkLabel(labels, lang) {
+    if (!labels || typeof labels !== 'object' || Array.isArray(labels)) return null;
+    var code = (typeof lang === 'string') ? lang.toLowerCase() : '';
+    // Own properties only, exactly as branding's pickPoweredByText does it and
+    // for the same reason: `labels` is author-supplied JSON, and an inherited
+    // key would hand str() a function instead of a missing line.
+    function own(k) {
+      return (k && Object.prototype.hasOwnProperty.call(labels, k)) ? str(labels[k]) : null;
+    }
+    var hit = own(code);
+    if (!hit && code.length > 2) hit = own(code.slice(0, 2));       // ru-RU -> ru
+    return hit || own('en');
+  }
+
+  var MAX_LINKS = 3;
+
+  function resolveLinks(cfg, lang) {
+    var texts = (cfg && cfg.texts && typeof cfg.texts === 'object') ? cfg.texts : null;
+    var list = texts && texts.links;
+    if (!list || !Array.isArray(list)) return [];
+    var out = [];
+    for (var i = 0; i < list.length && out.length < MAX_LINKS; i++) {
+      var row = list[i];
+      if (!row || typeof row !== 'object') continue;
+      var url = str(row.url);
+      if (!url || !/^https?:\/\//i.test(url)) continue;
+      var label = linkLabel(row.label, lang);
+      if (!label) continue;
+      out.push({ id: str(row.id) || ('link' + i), url: url, label: label });
+    }
     return out;
   }
 
+  /* SPEC V1.16 §1.3, last sentence — the one place where the link row DOES
+     touch «Подробнее»: when the address it would send the visitor to is
+     already one of the rows under the buttons, the banner shows the same
+     address twice. The second copy is not more information, it is noise, so
+     the in-text link is dropped and the banner renders as `detailsAction:
+     'hide'` for that render — the link row keeps the address, with a label the
+     operator wrote, which is the better of the two.
+
+     Only 'policy' and 'declaration' can duplicate anything: 'settings' opens
+     the panel and has no address to collide with, and 'hide' is already gone.
+
+     Comparison is deliberately narrow. Trimming and a trailing slash are
+     typography, not identity — `https://shop.md/cookies` and
+     `…/cookies/` are the same page — and so is the case of the HOST, which
+     DNS does not distinguish. The PATH is left alone: `/Cookies` and
+     `/cookies` are genuinely two addresses on a case-sensitive server, and
+     suppressing a real «Подробнее» link over that guess is the worse error. */
+  function normHref(v) {
+    var s = str(v);
+    if (!s) return null;
+    var m = /^(https?:\/\/[^\/?#]*)([\s\S]*)$/i.exec(s);
+    if (!m) return null;
+    return (m[1].toLowerCase() + m[2]).replace(/\/$/, '');
+  }
+
+  function detailsDuplicatesLink(details, links) {
+    if (!details) return false;
+    if (details.kind !== 'policy' && details.kind !== 'declaration') return false;
+    var href = normHref(details.href);
+    if (!href || !links || !Array.isArray(links)) return false;
+    for (var i = 0; i < links.length; i++) {
+      if (links[i] && normHref(links[i].url) === href) return true;
+    }
+    return false;
+  }
+
+  /* Which of the three shapes the banner will actually draw, duplicate rule
+     applied — so buildBanner() and signature() cannot disagree about it.
+     `lang` is the code the banner resolved to; signature() passes the config's
+     own so both sides of a comparison are read in the same language. */
+  function detailsKind(cfg, lang) {
+    var det = resolveDetails(cfg);
+    var code = (typeof lang === 'string' && lang) ? lang :
+      resolveLang(cfg && cfg.language, localeTable());
+    return detailsDuplicatesLink(det, resolveLinks(cfg, code)) ? 'hide' : det.kind;
+  }
+
+  // The row itself, or null when there is nothing to draw — so both call sites
+  // (banner and panel) are one `if` rather than two.
+  function buildLinksRow(cfg, cls) {
+    var links = resolveLinks(cfg, LANG);
+    if (!links.length) return null;
+    var row = el('div', 'ck-links' + (cls ? ' ' + cls : ''));
+    for (var i = 0; i < links.length; i++) {
+      var a = el('a', 'ck-links__a', links[i].label);
+      a.href = links[i].url;
+      a.target = '_blank';
+      a.rel = 'noopener';
+      row.appendChild(a);
+    }
+    return row;
+  }
+
   /* ------------------------------------------- blocked-embed placeholder (§2) */
 
   /* The one piece of the placeholder that is worth testing without a DOM: which
@@ -525,6 +920,40 @@
        >= 4.5:1 rule as «Подробнее» — see the note on the `a{}` rule above. */
     '.ck-svc__policy{display:inline-block;margin-top:4px;font-size:12.5px;color:var(--ck-link)}',
 
+    /* ---- «Дополнительно» card (SPEC V1.16 §1.2) ---- */
+    /* A card, not another category row: it carries no switch and answers a
+       different question — who the operator is and how to reach them. So it
+       gets the soft fill and the rounded border the cookie table wears, which
+       reads as «a panel of reference text» rather than «a fifth thing you can
+       turn off».
+
+       It is appended AFTER the categories, which means the last .ck-cat is no
+       longer `:last-child` and keeps its bottom rule — that is wanted here: the
+       rule is what separates the last category from this block. The rule below
+       restores the old look for the category above it only in the sense that
+       the separator now belongs to the boundary rather than to the group. */
+    '.ck-extra{margin:16px 0 4px;padding:14px 16px;background:var(--ck-soft);',
+    'border:1px solid var(--ck-line);border-radius:var(--ck-radius-card)}',
+    '.ck-extra__title{margin:0 0 6px;font-size:15px;font-weight:600}',
+    /* Same size and colour as .ck-cat__desc: this is secondary reference text,
+       and it is measured for AA against the card by the same rule. */
+    '.ck-extra__body p{margin:0 0 8px;font-size:13.5px;color:var(--ck-muted);line-height:1.5}',
+    '.ck-extra__body p:last-child{margin-bottom:0}',
+    /* --ck-link, not --ck-accent — accent-coloured TEXT answers to 4.5:1
+       against the card; see the note on the `a{}` rule above. */
+    '.ck-extra__body a{color:var(--ck-link)}',
+
+    /* ---- link row under the buttons (SPEC V1.16 §1.3) ---- */
+    /* One row, wrapping. `width:100%` matters in the bar layout, whose banner is
+       a flex row: without it the row would try to sit BESIDE the buttons on a
+       wide screen instead of under them. */
+    '.ck-links{display:flex;gap:14px;flex-wrap:wrap;width:100%;margin-top:12px;font-size:13px}',
+    '.ck-links__a{color:var(--ck-link)}',
+    /* The panel foot is a flex row of buttons that each take `flex:1 1 150px`;
+       a full-width row forced onto its own line keeps the links under the
+       buttons rather than wedged between two of them. */
+    '.ck-links--panel{flex-basis:100%;margin-top:2px}',
+
     /* ---- switch ---- */
     '.ck-switch{flex:none;width:46px;height:27px;padding:0;border-radius:999px;',
     'border:1px solid var(--ck-line);background:var(--ck-soft);position:relative}',
@@ -573,6 +1002,9 @@
     '.ck-banner--bar .ck-banner__body{display:contents}',
     '.ck-banner--bar .ck-banner__body>*{order:1}',
     '.ck-banner--bar .ck-actions{order:2}',
+    // SPEC V1.16 §1.3 — the link row is `order:3` so it stays under the buttons
+    // in the bar's mobile column, where every child's position is explicit.
+    '.ck-banner--bar .ck-links{order:3}',
     /* Reference: the box's button row becomes a column under 560px. */
     '.ck-banner--box .ck-actions{flex-direction:column}',
     '.ck-banner--box .ck-btn{flex:1 1 auto;width:100%}}',
@@ -2076,6 +2508,14 @@
 
     var p = el('p');
     var det = resolveDetails(cfg);
+    /* SPEC V1.16 §1.3 — «Подробнее» and one of the link rows point at the same
+       page: drop the in-text copy rather than print the address twice. Asked
+       through detailsKind() so the shape drawn here is the same one signature()
+       watches for changes. The links are resolved for THIS render's language,
+       exactly as buildLinksRow does below, so a row that no visitor of this
+       banner can see (no label in their language) never silences the link
+       they can. */
+    if (detailsKind(cfg, LANG) === 'hide') det = { kind: 'hide', href: null };
     if (det.kind === 'hide') {
       p.appendChild(document.createTextNode(T.bannerText));
     } else {
@@ -2136,6 +2576,18 @@
     actions.appendChild(custom);
     b.appendChild(actions);
 
+    /* SPEC V1.16 §1.3 — the link row, under the buttons in all three layouts.
+       Appended to the BANNER rather than to the body, so it sits after the
+       actions in DOM (and reading) order everywhere: box and modal stack, and
+       the bar's `width:100%` on .ck-links forces it onto its own line under
+       the row instead of squeezing in beside the buttons.
+
+       The bar's mobile media query re-orders its children explicitly (body
+       contents `order:1`, actions `order:2`); the row carries `order:3` there
+       so it stays below the buttons rather than jumping above them. */
+    var blinks = buildLinksRow(cfg, 'ck-links--banner');
+    if (blinks) b.appendChild(blinks);
+
     // box/modal: the foot follows the buttons (see the note above).
     if (foot && lay.type !== 'bar') b.appendChild(foot);
 
@@ -2147,6 +2599,21 @@
     root.appendChild(b);
   }
 
+  /* SPEC V1.16 §1.2 — the «Дополнительно» card, or null when the site supplied
+     no text for this language. T.extraText has already been through the whole
+     merge (dictionary '' <- __ckLocales <- config.texts[lang] <- [base]), so
+     the only question left here is whether anything survived it. */
+  function buildExtra() {
+    var nodes = renderRich(T.extraText);
+    if (!nodes.length) return null;
+    var box = el('div', 'ck-extra');
+    box.appendChild(el('h3', 'ck-extra__title', T.extraTitle));
+    var bodyEl = el('div', 'ck-extra__body');
+    for (var i = 0; i < nodes.length; i++) bodyEl.appendChild(nodes[i]);
+    box.appendChild(bodyEl);
+    return box;
+  }
+
   function buildPanel(cfg) {
     var scrim = el('div', 'ck-panel-scrim ck-hidden');
     scrim.setAttribute('aria-hidden', 'true');
@@ -2174,6 +2641,18 @@
     var body = el('div', 'ck-panel__body');
     var cats = ['necessary'].concat(activeOptIn(cfg));
     for (var i = 0; i < cats.length; i++) body.appendChild(buildCategory(cfg, cats[i]));
+
+    /* SPEC V1.16 §1.2 — «Дополнительно», after the categories and their service
+       lists, before the buttons. INSIDE .ck-panel__body, which is the scrolling
+       region: an operator block runs to a paragraph or three, and put between
+       the body and the foot it would be clipped on a short viewport with no way
+       to reach the end of it.
+
+       Rendered only when the resolved extraText is a non-empty string — every
+       dictionary ships '', so a site that never configured one draws nothing
+       and the panel is byte-for-byte what 0.5.14 drew. */
+    var extra = buildExtra();
+    if (extra) body.appendChild(extra);
     p.appendChild(body);
 
     var foot = el('div', 'ck-panel__foot');
@@ -2201,6 +2680,11 @@
     foot.appendChild(save);
     foot.appendChild(acc);
     foot.appendChild(rej);
+    // SPEC V1.16 §1.3 — the operator's own addresses, under the panel's buttons
+    // and above the attribution, so the bottom of the panel reads: what you can
+    // do, then where to read more, then who made this.
+    var plinks = buildLinksRow(cfg, 'ck-links--panel');
+    if (plinks) foot.appendChild(plinks);
     // Same attribution foot as the banner: mark and credit sign the bottom,
     // below the action buttons, never the panel heading.
     var pfoot = buildPoweredBy(cfg);
@@ -2757,7 +3241,14 @@
       // Structural: link / button / nothing are three different DOM shapes,
       // and mount() is one-shot. Buttons and colours are deliberately NOT
       // here — they are token values and restyle in place.
-      resolveDetails(c).kind,
+      /* SPEC V1.16 §1.3 — the EFFECTIVE kind, not the configured one: a config
+         whose policyUrl grows into (or out of) one of its own link rows flips
+         the shape between link and nothing while resolveDetails still answers
+         'policy'. Without the fold, a SaaS config arriving after the first
+         mount would leave the duplicate on screen. The language is the config's
+         own, resolved the way mount() resolves it, so the two sides of a
+         comparison are always read in the same language. */
+      detailsKind(c),
       /* SPEC V1.12 §3 — services are STRUCTURAL: each one adds a row with its
          own switch to the panel, and mount() is one-shot. Without this a SaaS
          config that arrives after the first mount (the second, idempotent
@@ -2770,10 +3261,43 @@
          `purpose` is text inside an existing row and does not justify tearing
          the panel down. */
       serviceSignature(c),
+      /* SPEC V1.16 §1 — custom texts are STRUCTURAL for the same reason
+         services are: the «Дополнительно» card and the link row are DOM nodes
+         that appear and disappear, and mount() is one-shot. A SaaS config that
+         arrives after the first render (the second, idempotent init()) would
+         otherwise leave a panel with no operator block on a site that has one.
+
+         Not the texts themselves, which can be long: the LANGUAGE KEYS that
+         carry overrides, whether an extra block would render, and the links'
+         identity. A reworded sentence inside a block that is already on screen
+         does not justify tearing the panel down mid-decision. */
+      textsSignature(c),
       brandSignature(c)
     ].join('|');
   }
 
+  function textsSignature(cfg) {
+    var texts = (cfg && cfg.texts && typeof cfg.texts === 'object' && !Array.isArray(cfg.texts))
+      ? cfg.texts : null;
+    if (!texts) return '0';
+    var langs = [];
+    for (var k in texts) {
+      if (!Object.prototype.hasOwnProperty.call(texts, k)) continue;
+      if (LANG_KEY_RE.test(String(k).toLowerCase())) langs.push(String(k).toLowerCase());
+    }
+    langs.sort();
+    var list = texts.links;
+    var ids = [];
+    if (Array.isArray(list)) {
+      for (var i = 0; i < list.length; i++) {
+        var row = list[i];
+        if (row && typeof row === 'object') ids.push(String(row.id || i) + ':' + String(row.url || ''));
+      }
+    }
+    if (!langs.length && !ids.length) return '0';
+    return langs.join(',') + '/' + ids.join(',');
+  }
+
   function serviceSignature(cfg) {
     var list = cfg && cfg.services;
     if (!list || !Array.isArray(list) || !list.length) return '0';
@@ -2816,7 +3340,10 @@
 
     var table = localeTable();                       // read at render time
     LANG = resolveLang(cfg && cfg.language, table);
-    T = buildStrings(LANG, table);
+    // SPEC V1.16 §1.1 — the config is the third merge layer, so it must be
+    // handed in here: this is the only place that knows which language the
+    // banner actually resolved to, which is what the override is keyed by.
+    T = buildStrings(LANG, table, cfg);
 
     host = document.getElementById('ck-root');
     if (!host) {
@@ -2952,6 +3479,22 @@
       servicePurpose: servicePurpose,
       groupCountLabel: groupCountLabel,
       serviceSignature: serviceSignature,
+      /* SPEC V1.16 §1 — the pure halves of the custom-text feature, so the
+         cabinet's live preview quotes the same rules the banner paints and the
+         server's validator can be tested against the same contract.
+
+         renderRich() is the exception to «nothing here touches the DOM»: it
+         BUILDS nodes, so it needs document.createElement. That is deliberate —
+         the whole point of the function is that there is no innerHTML anywhere
+         in it, and a version that returned a string could not promise that. It
+         is still pure in every other sense: same input, same nodes, no reads of
+         module state. In a context with no `document` it is simply not called. */
+      renderRich: renderRich,
+      resolveLinks: resolveLinks,
+      linkLabel: linkLabel,
+      detailsDuplicatesLink: detailsDuplicatesLink,
+      detailsKind: detailsKind,
+      textsSignature: textsSignature,
       signature: signature
     };
     // The page-font probe reads the DOM, so it is not part of the pure block —
@@ -2971,6 +3514,11 @@
   // this file in Node is a no-op rather than a throw (mirrors the core).
   if (typeof document === 'undefined') return;
 
+  // Claim the page for this copy (SPEC §1.9, guard at the top of the file).
+  // Here rather than at the top: only now does this copy take ownership of the
+  // listeners and the mount, and only that ownership is worth locking.
+  try { if (typeof window !== 'undefined') { window.__ckUiLoaded = true; } } catch (e) { /* noop */ }
+
   document.addEventListener('ck:init', function (e) {
     var d = (e && e.detail) || {};
     var cfg = d.config || safeConfig();