@morphemecms/cms 0.0.0-stage → 0.1.0

package/site/tracking.client.ts

@@ -0,0 +1,225 @@
+// The visitor's yes or no to each category of cookies in the cookie banner (@morphemecms/cms/lib/cookieCategories.mjs:
+// preferences, statistics, marketing, targeting; necessary ones are not asked about), and the site's events. The apps that measure
+// (Google Analytics, Google Ads, Google Tag Manager: src/apps/) load their tags with afterConsent, only after a yes to
+// their category (Google consent mode, "basic": the Google tag is not loaded at all until the visitor says yes, and it
+// is told which categories the visitor said yes to), and send the events on. Where events are sent from:
+// `tracking.hosts` in packages/editor/site/tracking.ts.
+//
+// Events (GA4 event names; mark them as key events in GA4 and import them in Google Ads):
+// - book_appointment: a time was booked (the app Calendly: in the booking sheet or on the booking page)
+// - open_booking:     the booking calendar was opened
+// - click_to_call:    a phone link was tapped
+// - email_click:      an e-mail link was clicked
+import { CONSENT_CATEGORIES, isConsentCategory, type ConsentCategory } from '@morphemecms/cms/lib/cookieCategories.mjs';
+import { cookieList } from './cookieList';
+import { tracking } from './tracking';
+import { site } from './site';
+
+/** The visitor's yes (true) or no to each category the cookie banner asked about. */
+export type Consent = Partial<Record<ConsentCategory, boolean>>;
+const KEY = 'consent';
+const MAX_AGE = 365 * 24 * 60 * 60 * 1000; // ask again after a year
+
+declare global {
+  interface Window {
+    dataLayer: unknown[];
+    gtag: (...args: unknown[]) => void;
+  }
+}
+
+const params = new URLSearchParams(location.search);
+try {
+  if (params.get('tracking') === 'test') sessionStorage.setItem('tracking-test', '1');
+} catch {}
+/** Whether events are sent from another address than the site's own (?tracking=test): GA4's debug mode. */
+export const testing = (() => {
+  try {
+    return sessionStorage.getItem('tracking-test') === '1';
+  } catch {
+    return false;
+  }
+})();
+const live = tracking.hosts.includes(location.hostname) || testing;
+
+/** The visitor's answer in the cookie banner, within the last year; undefined without one (or with one from before
+ * the banner asked about each category, which is asked again). */
+export function storedConsent(): Consent | undefined {
+  try {
+    const saved = JSON.parse(localStorage.getItem(KEY) ?? 'null');
+    if (!saved || typeof saved.choices !== 'object' || !saved.choices || Date.now() - saved.at >= MAX_AGE) return undefined;
+    return Object.fromEntries(
+      Object.entries(saved.choices).filter(([category, yes]) => isConsentCategory(category) && typeof yes === 'boolean'),
+    ) as Consent;
+  } catch {
+    return undefined;
+  }
+}
+
+const granted = (category: ConsentCategory) => storedConsent()?.[category] === true;
+
+// Google's consent mode: what its tags may store, by the visitor's answer (statistics: Analytics; marketing: Ads). A yes
+// to marketing is a yes to measuring whether the ads work; personalised ads (remarketing) only after a yes to targeted
+// ads, which the banner asks about only when an app is set to use them (`cookies` in its index.ts), so a site that does
+// not use them never allows them. Targeted ads store what ads do (ad_storage, ad_user_data) too.
+function googleSignals() {
+  const yes = (...categories: ConsentCategory[]) => (categories.some(granted) ? 'granted' : 'denied');
+  return {
+    analytics_storage: yes('statistics'),
+    ad_storage: yes('marketing', 'targeting'),
+    ad_user_data: yes('marketing', 'targeting'),
+    ad_personalization: yes('targeting'),
+  };
+}
+
+// Google signals (Analytics data joined with Google accounts, for ads and demographics) and ad personalisation in any
+// tag, likewise only after a yes to targeted ads, whatever the accounts' own settings say.
+function googleSettings() {
+  window.gtag('set', 'allow_google_signals', granted('targeting'));
+  window.gtag('set', 'allow_ad_personalization_signals', granted('targeting'));
+}
+
+/** Google's data layer with the visitor's answer in consent mode, for a tag of Google's (googleTag, Google Tag
+ * Manager's container, src/apps/gtm/), set up once, before the first tag loads; a new answer updates it (choose). */
+export function googleConsent() {
+  window.dataLayer = window.dataLayer || [];
+  if (typeof window.gtag === 'function') return;
+  window.gtag = function gtag() {
+    // eslint-disable-next-line prefer-rest-params
+    window.dataLayer.push(arguments);
+  };
+  window.gtag('consent', 'default', googleSignals());
+  googleSettings();
+  window.gtag('js', new Date());
+}
+
+let tagged = false;
+
+/** The Google tag (gtag.js) with this ID (Google Analytics' G-…, Google Ads' AW-…), for the apps that measure with it
+ * (src/apps/google-analytics/, src/apps/google-ads/), in afterConsent: loaded once for all of them, each ID configured. */
+export function googleTag(id: string, config: Record<string, unknown> = {}) {
+  googleConsent();
+  window.gtag('config', id, config);
+  if (tagged) return;
+  tagged = true;
+  const s = document.createElement('script');
+  s.async = true;
+  s.src = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(id)}`;
+  document.head.appendChild(s);
+}
+
+// The cookies of each category on the site's own address, to be removed after a no to it: those of the cookie list
+// ("Lister" › "Cookies", `*` for the rest of a name), and the others Google's tag may set (GA4: _ga, _ga_<id>, and
+// _gid and _gat from older tags; Ads: _gcl_au and the other _gcl_ ones).
+const pattern = (name: string) => new RegExp(`^${name.replace(/[.+?^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*')}$`);
+const COOKIES: Record<ConsentCategory, RegExp[]> = {
+  preferences: [],
+  statistics: [/^(_ga(_.+)?|_gid|_gat(_.+)?)$/],
+  marketing: [/^_gcl_.+$/],
+  targeting: [],
+};
+for (const c of cookieList) if (isConsentCategory(c.category)) COOKIES[c.category].push(pattern(c.name));
+
+// Each one is removed on the hostname and on every parent domain (Google's are set on example.dk for
+// www.example.dk).
+function removeCookies(categories: ConsentCategory[]) {
+  const patterns = categories.flatMap((category) => COOKIES[category]);
+  const names = document.cookie
+    .split(';')
+    .map((c) => c.split('=')[0].trim())
+    .filter((name) => patterns.some((p) => p.test(name)));
+  if (!names.length) return;
+  const labels = location.hostname.split('.');
+  const domains = ['', ...labels.slice(0, -1).map((_, i) => `; domain=.${labels.slice(i).join('.')}`)];
+  for (const name of names)
+    for (const domain of domains) document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT${domain}`;
+}
+
+/** The random id of this browser's answers in the consent log (packages/editor/worker/consent.js), shown in the cookie banner so the
+ * visitor can point to their own; null before the first answer. */
+export function consentId(): string | null {
+  try {
+    const id = JSON.parse(localStorage.getItem(KEY) ?? 'null')?.id;
+    return typeof id === 'string' ? id : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Saves the visitor's answer (a yes or no to each category the banner asks about), in the browser and in the consent
+ * log, starts what waited for a yes and removes the cookies of each category said no to. A no to all the categories of
+ * something already started on this page reloads it, so it stops. */
+export function choose(consent: Consent) {
+  const id = consentId() ?? crypto.randomUUID();
+  try {
+    localStorage.setItem(KEY, JSON.stringify({ choices: consent, at: Date.now(), id }));
+  } catch {}
+  logConsent(id, consent);
+  if (typeof window.gtag === 'function') {
+    window.gtag('consent', 'update', googleSignals());
+    googleSettings();
+  }
+  removeCookies(CONSENT_CATEGORIES.filter((category) => !granted(category)));
+  if (started.some((categories) => !categories.some(granted))) return location.reload();
+  for (const wait of waiting.splice(0)) afterConsent(wait.categories, wait.run);
+}
+
+// The answer to the consent log on the site's Worker (/api/consent), also when the page reloads right after
+// (keepalive). Not the answers of a test (?tracking=test: the cookie scan's visitors, src/apps/cookiescanner/).
+function logConsent(id: string, consent: Consent) {
+  if (testing) return;
+  fetch('/api/consent', { method: 'POST', keepalive: true, body: JSON.stringify({ id, choices: consent }) }).catch(() => {});
+}
+
+export function track(name: string, data: Record<string, unknown> = {}) {
+  if (!CONSENT_CATEGORIES.some(granted)) return;
+  if (!live) return console.info('[tracking]', name, data);
+  // The apps that measure send it on (Google Analytics, Google Ads, Google Tag Manager: src/apps/).
+  dispatchEvent(new CustomEvent('tracking', { detail: { name, data } }));
+}
+
+// What the apps start after a yes (afterConsent), waiting for one; and the categories of each started on this page.
+const waiting: { categories: ConsentCategory[]; run: () => void }[] = [];
+const started: ConsentCategory[][] = [];
+
+let told = false;
+
+function start(categories: ConsentCategory[], run: () => void) {
+  if (!live) {
+    if (!told)
+      console.info(
+        `[tracking] Ikke på ${tracking.hosts[0]}: tags hentes ikke, og events logges kun her. Tilføj ?tracking=test for at sende dem.`,
+      );
+    told = true;
+    return;
+  }
+  started.push(categories);
+  run();
+}
+
+/** The categories an app's tag waits for, as its slot writes them on its <meta> (data-consent, from `cookies` in its
+ * index.ts). */
+export const consentOf = (meta: HTMLElement | null) => (meta?.dataset.consent ?? '').split(' ').filter(isConsentCategory);
+
+/** Runs `run` once the visitor has said yes to one of `categories` in the cookie banner (now, if they already have),
+ * on the site's own address (`hosts`, or with ?tracking=test): for an app that loads something that sets cookies
+ * (`cookies` in its index.ts, e.g. Google Analytics, src/apps/google-analytics/). A no to all of them after a yes
+ * reloads the page, so it stops. */
+export function afterConsent(categories: ConsentCategory[], run: () => void) {
+  if (categories.some(granted)) start(categories, run);
+  else waiting.push({ categories, run });
+}
+
+// The cookies of each category the visitor has not said yes to, also any left from before (a yes earlier).
+removeCookies(CONSENT_CATEGORIES.filter((category) => !granted(category)));
+
+// A time was booked: an app that books says so with the event "booking:done" on the window, with how
+// (`method`, e.g. "calendly": src/apps/calendly/).
+addEventListener('booking:done', (e) => track('book_appointment', { method: (e as CustomEvent).detail?.method }));
+
+document.addEventListener('click', (e) => {
+  const link = (e.target as Element | null)?.closest?.('a');
+  const href = link?.getAttribute('href') ?? '';
+  if (href.startsWith('tel:')) track('click_to_call', { link_url: href });
+  else if (href.startsWith('mailto:')) track('email_click', { link_url: href });
+  else if (href === site.bookingPath) track('open_booking', { page: location.pathname });
+});

package/site/tracking.ts

@@ -0,0 +1,9 @@
+// Where the site measures from: only these hostnames load the apps' tags (Google Analytics, Google Ads, Google Tag
+// Manager, src/apps/) and send events (src/scripts/tracking.ts). Elsewhere (staging) events are only logged to the
+// console, unless the address has ?tracking=test, which sends them (in GA4's debug mode). The IDs are the apps'
+// settings (src/data/apps/).
+import { config } from '@site/config';
+
+export const tracking = {
+  hosts: [config.domain, `www.${config.domain}`],
+};

package/src/ActionParts.tsx

@@ -0,0 +1,205 @@
+// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Handlinger": the theme's buttons that do more than one thing
+// (packages/editor/theme/ui/, through @site/editor) as the site draws them: button groups in both kinds with toggles on
+// and off, in every size and in both shapes, segmented buttons with one and with several chosen, split buttons in their
+// kinds and sizes, closed and with the menu open, and FAB menus in their colour sets, from FABs of each size, closed
+// and open. Only drawn: nothing opens or turns on here (that is the site's ui/*.script.ts),
+// and the links lead nowhere.
+import {
+  SiteButton,
+  SiteButtonGroup,
+  SiteFabMenu,
+  SiteIconButton,
+  SiteMenuItem,
+  SiteSegmentedButton,
+  SiteSplitButton,
+  buttonGroupKinds,
+  buttonShapes,
+  buttonSizes,
+  fabMenuKinds,
+  splitButtonKinds,
+} from './themeUi';
+import { Part } from './PartsShown';
+import { Preview } from './ui';
+import { t } from './i18n';
+
+const { sizes, shapes } = t.parts.screens;
+const say = t.parts.screens.actions;
+const row = 'flex flex-wrap items-center gap-4';
+// Icons the site draws (icon.tsx).
+const channelIcons = ['phone', 'envelope-simple', 'chats'];
+const modeIcons = ['sun', 'moon'];
+const wayIcons = ['phone', 'envelope-simple', 'calendar-blank'];
+
+const ways = () =>
+  say.ways.map((way) => (
+    <SiteMenuItem key={way} href="">
+      {way}
+    </SiteMenuItem>
+  ));
+const fabItems = say.ways.map((way, i) => ({ icon: wayIcons[i], label: way, href: '' }));
+
+export default function ActionParts() {
+  return (
+    <>
+      <Part name="ButtonGroup" use={say.buttonGroup}>
+        <Preview>
+          <div className="space-y-4 p-4">
+            {buttonGroupKinds.map((kind) => (
+              <div key={kind} className={row}>
+                <SiteButtonGroup kind={kind} label={say.group}>
+                  {say.views.map((view, i) => (
+                    <SiteButton key={view} selected={i === 1}>
+                      {view}
+                    </SiteButton>
+                  ))}
+                </SiteButtonGroup>
+                <SiteButtonGroup kind={kind} label={say.channel}>
+                  {say.channels.map((name, i) => (
+                    <SiteIconButton key={name} kind="filled" icon={channelIcons[i]} label={name} title={name} selected={i === 0} />
+                  ))}
+                </SiteButtonGroup>
+              </div>
+            ))}
+            {buttonSizes.map((size) => (
+              <div key={size} className={row} role="group" aria-label={sizes[size]}>
+                <SiteButtonGroup kind="connected" label={say.mode}>
+                  {say.modes.map((mode, i) => (
+                    <SiteIconButton key={mode} kind="tonal" size={size} icon={modeIcons[i]} label={mode} title={mode} selected={i === 0} />
+                  ))}
+                </SiteButtonGroup>
+                <SiteButtonGroup label={say.group}>
+                  {say.views.map((view, i) => (
+                    <SiteButton key={view} size={size} selected={i === 1}>
+                      {view}
+                    </SiteButton>
+                  ))}
+                </SiteButtonGroup>
+              </div>
+            ))}
+            {buttonShapes.map((shape) => (
+              <div key={shape} className={row} role="group" aria-label={shapes[shape]}>
+                {buttonGroupKinds.map((kind) => (
+                  <SiteButtonGroup key={kind} kind={kind} label={say.group}>
+                    {say.views.map((view, i) => (
+                      <SiteButton key={view} kind="outlined" size="small" shape={shape} selected={i === 0}>
+                        {view}
+                      </SiteButton>
+                    ))}
+                  </SiteButtonGroup>
+                ))}
+                <SiteButtonGroup kind="connected" label={say.channel}>
+                  {say.channels.map((name, i) => (
+                    <SiteIconButton
+                      key={name}
+                      kind="filled"
+                      shape={shape}
+                      icon={channelIcons[i]}
+                      label={name}
+                      title={name}
+                      selected={i === 2}
+                    />
+                  ))}
+                </SiteButtonGroup>
+              </div>
+            ))}
+            <SiteButtonGroup label={say.book}>
+              <SiteButton icon="calendar-blank">{say.actions[0]}</SiteButton>
+              <SiteButton kind="outlined" icon="phone">
+                {say.actions[1]}
+              </SiteButton>
+              <SiteButton kind="text">{say.actions[2]}</SiteButton>
+            </SiteButtonGroup>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="SegmentedButton" use={say.segmentedButton}>
+        <Preview>
+          <div className="space-y-4 p-4">
+            <div>
+              <SiteSegmentedButton
+                label={say.mode}
+                segments={say.modes.map((mode, i) => ({ label: mode, icon: modeIcons[i], selected: i === 0 }))}
+              />
+            </div>
+            <div>
+              <SiteSegmentedButton
+                label={say.days}
+                multiple
+                segments={say.weekdays.map((day, i) => ({ label: day, selected: i === 0 || i === 2 }))}
+              />
+            </div>
+            <div>
+              <SiteSegmentedButton
+                label={say.channel}
+                segments={say.channels.map((name, i) => ({ label: name, icon: channelIcons[i], selected: i === 2, disabled: i === 1 }))}
+              />
+            </div>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="SplitButton" use={say.splitButton}>
+        <Preview>
+          <div className="space-y-4 p-4">
+            <div className={row}>
+              {splitButtonKinds.map((kind) => (
+                <SiteSplitButton key={kind} kind={kind} label={say.kinds[kind]} menuLabel={say.more}>
+                  {ways()}
+                </SiteSplitButton>
+              ))}
+            </div>
+            <div className={row}>
+              {buttonSizes.map((size) => (
+                <SiteSplitButton key={size} kind="tonal" size={size} label={sizes[size]} menuLabel={say.more}>
+                  {ways()}
+                </SiteSplitButton>
+              ))}
+            </div>
+            <div className={row}>
+              <SiteSplitButton disabled label={say.disabled} menuLabel={say.more}>
+                {ways()}
+              </SiteSplitButton>
+            </div>
+            <div className="flex justify-end pb-44">
+              <SiteSplitButton icon="calendar-blank" label={say.book} menuLabel={say.more} open>
+                {ways()}
+              </SiteSplitButton>
+            </div>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="FabMenu" use={say.fabMenu}>
+        <Preview>
+          <div className="space-y-6 p-4">
+            <div className={`${row} justify-end`}>
+              {fabMenuKinds.map((kind) => (
+                <SiteFabMenu
+                  key={kind}
+                  kind={kind}
+                  icon="chats"
+                  label={say.contact}
+                  closeLabel={say.close}
+                  items={fabItems}
+                  title={say.fabKinds[kind]}
+                />
+              ))}
+              <SiteFabMenu fabKind="primary-container" icon="chats" label={say.contact} closeLabel={say.close} items={fabItems} />
+              {(['medium', 'large'] as const).map((size) => (
+                <SiteFabMenu key={size} size={size} icon="chats" label={say.contact} closeLabel={say.close} items={fabItems} />
+              ))}
+            </div>
+            <div className="grid gap-6 sm:grid-cols-2">
+              {fabMenuKinds.map((kind) => (
+                <div key={kind} className="flex justify-end pt-52">
+                  <SiteFabMenu kind={kind} icon="chats" label={say.contact} closeLabel={say.close} items={fabItems} open />
+                </div>
+              ))}
+              <div className="flex justify-end pt-52">
+                <SiteFabMenu size="large" icon="chats" label={say.contact} closeLabel={say.close} items={fabItems} open />
+              </div>
+            </div>
+          </div>
+        </Preview>
+      </Part>
+    </>
+  );
+}

package/src/Advanced.tsx

@@ -0,0 +1,152 @@
+// "Avanceret" (#avanceret), under "Indstillinger": R2 caching, the copy of the site's files in Cloudflare R2 the Worker
+// answers the editor from (packages/editor/worker/files.js), turned on and off with "Aktiveret" in the Worker's settings (r2Caching.ts),
+// saved at once in its own commit. Off, the Worker asks GitHub for everything. It can only be turned on when Cloudflare
+// has the bucket (the Worker asks, /api/r2), else a deploy would fail; under the switch, why not, and, until the site is
+// built with the change, that it comes then. Above it, where the bucket is kept ("Placering": placed by Cloudflare, or
+// within the EU), changed only while it is off, also in its own commit.
+import { useEffect, useState } from 'react';
+import Screen from './Screen';
+import { EmptyNote, FormField, GroupTitle, ProblemNote, SegmentedButton, SupportingText, SwitchRow } from './ui';
+import { ConflictError, type RepoFile } from './github';
+import type { Env } from './App';
+import { savedText } from './deploy';
+import { backFrom } from './site';
+import {
+  bucketOf,
+  JURISDICTIONS,
+  jurisdictionName,
+  jurisdictionOf,
+  r2CachingOn,
+  r2Status,
+  withJurisdiction,
+  withR2Caching,
+  type BucketState,
+} from './r2Caching';
+import { config } from '@site/editor';
+import { siteT, t } from './i18n';
+
+export const ADVANCED_ROUTE = 'avanceret';
+
+// "Placering" when Cloudflare places the bucket (no jurisdiction).
+const AUTO = 'auto';
+
+export default function Advanced({ env }: { env: Env }) {
+  const [file, setFile] = useState<RepoFile | null>(null);
+  const [status, setStatus] = useState<{ bound: boolean; bucket: BucketState } | null>(null);
+  const [problem, setProblem] = useState('');
+  const [saving, setSaving] = useState(false);
+  useEffect(() => {
+    env
+      .load([config.wrangler])
+      .then(([found]) => {
+        if (!found) return setProblem(t.advanced.noSettings);
+        setFile(found);
+        ask(found.text);
+      })
+      .catch((e) => setProblem(t.advanced.notLoaded((e as Error).message)));
+  }, []);
+
+  // What Cloudflare says of the bucket the settings name, where they say it is kept.
+  function ask(text: string) {
+    const bucket = bucketOf(text);
+    setStatus(null);
+    if (bucket) r2Status(bucket, jurisdictionOf(text)).then(setStatus);
+  }
+  const on = file ? r2CachingOn(file.text) : null;
+  const bucket = file ? bucketOf(file.text) : null;
+  const jurisdiction = file ? jurisdictionOf(file.text) : null;
+  // Off, it can be turned on only when Cloudflare has the bucket; on, it can always be turned off.
+  const ready = status?.bucket === 'ready';
+  const note = !status
+    ? t.advanced.checking
+    : !on && !ready
+      ? t.advanced.bucket[status.bucket](bucket ?? '', jurisdiction && jurisdictionName(jurisdiction))
+      : on !== status.bound
+        ? on
+          ? t.advanced.onWhenBuilt
+          : t.advanced.offWhenBuilt
+        : t.advanced.r2CachingHint;
+
+  // The places offered: by Cloudflare, the jurisdictions, and one the settings name that is not among them.
+  const places = [
+    AUTO,
+    ...JURISDICTIONS,
+    ...(jurisdiction && !(JURISDICTIONS as readonly string[]).includes(jurisdiction) ? [jurisdiction] : []),
+  ];
+
+  async function save(text: string, message: string, change: string): Promise<boolean> {
+    if (!file) return false;
+    const path = file.path;
+    setSaving(true);
+    env.notify({ text: t.common.saving });
+    try {
+      const oids = await env.commit(message, [{ path, content: text, oid: file.oid }], change);
+      const saved = { path, oid: oids[path], text };
+      setFile(saved);
+      env.onSaved(saved);
+      env.notify({ text: savedText(change), kind: 'saved' });
+      return true;
+    } catch (e) {
+      env.notify({ text: e instanceof ConflictError ? e.message : t.common.notSaved((e as Error).message), error: true, kind: 'failed' });
+      return false;
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function turn(next: boolean) {
+    if (!file || on === null || (next && !ready)) return;
+    await save(
+      withR2Caching(file.text, next),
+      siteT.advanced.r2CachingCommit(next),
+      t.app.changes[next ? 'turnedOn' : 'turnedOff'](t.app.changes.r2Caching),
+    );
+  }
+
+  // Another place names another bucket, so it is asked about again.
+  async function place(next: string) {
+    if (!file || on !== false) return;
+    const kept = next === AUTO ? null : next;
+    const text = withJurisdiction(file.text, kept);
+    if (await save(text, siteT.advanced.placeCommit(kept && jurisdictionName(kept)), t.app.changes.edited(t.app.changes.place))) ask(text);
+  }
+
+  return (
+    <Screen title={t.common.parts.advanced} wide back={backFrom(ADVANCED_ROUTE)}>
+      <section className="mb-8">
+        <GroupTitle>{t.advanced.r2Caching}</GroupTitle>
+        <div className="px-4">
+          {problem ? (
+            <ProblemNote>{problem}</ProblemNote>
+          ) : !file ? (
+            <EmptyNote busy>{t.advanced.loading}</EmptyNote>
+          ) : on === null || !bucket ? (
+            <ProblemNote>{t.advanced.noLine}</ProblemNote>
+          ) : (
+            <>
+              <div className="mb-6">
+                <FormField label={t.advanced.place} hint={t.advanced.placeHint}>
+                  <SegmentedButton
+                    label={t.advanced.place}
+                    value={jurisdiction ?? AUTO}
+                    options={places.map((p) => ({ value: p, label: p === AUTO ? t.advanced.placeAuto : jurisdictionName(p) }))}
+                    disabled={saving || on}
+                    onChange={place}
+                  />
+                </FormField>
+              </div>
+              <SwitchRow
+                label={t.blockSettings.active}
+                texts={[t.library.on, t.library.off]}
+                selected={on}
+                disabled={saving || (!on && !ready)}
+                onChange={turn}
+              />
+              <SupportingText className="mt-2">{note}</SupportingText>
+            </>
+          )}
+        </div>
+      </section>
+    </Screen>
+  );
+}