product_tours 0.1.0

data/lib/product_tours/dashboard.css

@@ -0,0 +1,196 @@
+:root {
+  color-scheme: light dark;
+  --bg: #f6f7f9;
+  --surface: #ffffff;
+  --text: #1c2024;
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --accent: #2563eb;
+  --accent-text: #ffffff;
+  --draft: #6b7280;
+  --published: #16a34a;
+  --danger: #dc2626;
+  --code: #f0f1f3;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111418;
+    --surface: #1a1f26;
+    --text: #e6e8ea;
+    --muted: #9aa2ab;
+    --border: #2a313a;
+    --accent: #3b82f6;
+    --code: #232a33;
+  }
+}
+
+* { box-sizing: border-box; }
+html { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; }
+body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.container { max-width: 1020px; margin: 0 auto; padding: 24px 16px 64px; }
+h1 { margin: 0 0 16px; font-size: 22px; }
+h2 { margin: 0 0 12px; font-size: 16px; }
+.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+.page-head h1 { margin: 0; }
+.muted { color: var(--muted); font-size: 13px; }
+
+button, .button {
+  width: auto;
+  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px;
+  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
+  font: inherit; cursor: pointer;
+}
+button:hover, .button:hover { border-color: var(--muted); text-decoration: none; }
+button.primary, .button.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
+button.danger, .button.danger { color: var(--danger); }
+button.small, .button.small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
+
+.tabs { display: flex; gap: 6px; }
+.tabs a {
+  position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px;
+  min-height: 34px; padding: 5px 10px 8px; border-radius: 8px; color: var(--muted); font-weight: 600;
+}
+.tabs a:hover { background: var(--bg); color: var(--text); text-decoration: none; }
+.tabs a.active { color: var(--text); }
+.tabs a.active::after { content: ""; position: absolute; right: 20px; bottom: 0; left: 20px; height: 2px; border-radius: 999px; background: var(--accent); }
+.count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); font-size: 12px; text-align: center; }
+
+.filters { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
+.filters input[type="search"] { min-width: 0; }
+input, select, textarea {
+  width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
+  background: var(--surface); color: var(--text); font: inherit; font-size: 16px; letter-spacing: 0;
+}
+textarea { resize: vertical; }
+input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); outline-offset: 0; }
+
+.card { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
+.card.pad { padding: 16px; overflow: visible; }
+.badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; color: #ffffff; font-size: 12px; font-weight: 600; white-space: nowrap; }
+.badge.status-draft { background: var(--draft); }
+.badge.status-published { background: var(--published); }
+.badge.locale { border: 1px solid var(--border); background: transparent; color: var(--muted); }
+code.key { max-width: 100%; padding: 2px 7px; border-radius: 6px; background: var(--code); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
+.flash, .errors { margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
+.flash.notice { border-color: var(--published); }
+.flash.alert, .errors { border-color: var(--danger); }
+.errors ul { margin-bottom: 0; }
+.empty { padding: 48px 16px; color: var(--muted); text-align: center; }
+.empty-state { max-width: 320px; margin: auto; padding: 24px; text-align: center; }
+.empty-state h2 { margin: 0 0 6px; font-size: 18px; }
+.empty-state p { margin: 0; }
+.breadcrumb { margin: 0 0 12px; font-size: 13px; }
+
+.pt-index, .pt-index .container { height: 100vh; height: 100dvh; }
+.pt-index { overflow: hidden; }
+.pt-index .container { display: flex; max-width: 1280px; flex-direction: column; padding-bottom: 16px; }
+.pt-index .page-head { flex: 0 0 auto; }
+.dashboard-shell { display: grid; flex: 1 1 auto; grid-template-columns: minmax(330px, 410px) 1fr; gap: 16px; min-height: 0; }
+.dashboard-sidebar { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
+.dashboard-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; }
+.record-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+.record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
+.record-row:hover { background: var(--bg); text-decoration: none; }
+.record-row.active { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
+.record-main { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
+.record-topline, .record-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.record-copy { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+.record-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.record-side { align-self: center; color: var(--muted); }
+.pager { display: flex; flex: 0 0 auto; justify-content: space-between; min-height: 42px; padding: 10px 12px; border-top: 1px solid var(--border); }
+.dashboard-detail { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
+.dashboard-detail .post-panel { flex: 1 1 auto; min-height: 0; }
+.dashboard-detail .detail-scroll { flex: 1 1 auto; overflow-y: auto; padding-right: 2px; }
+.mobile-back { display: none; }
+
+.post-panel { display: flex; min-width: 0; flex-direction: column; }
+.detail-scroll { display: flex; min-height: 0; flex-direction: column; gap: 12px; }
+.preview-card { width: 100%; }
+.video-preview { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 16px; overflow: hidden; border-radius: 6px; background: #05070a; }
+.video-preview iframe, .video-preview video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
+.description-preview { color: var(--muted); overflow-wrap: anywhere; }
+.preview-action { display: flex; justify-content: flex-end; margin-top: 16px; }
+.details-card { width: 100%; }
+dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
+dt { color: var(--muted); }
+dd { margin: 0; overflow-wrap: anywhere; }
+.refresh-button { margin-top: 14px; }
+.metadata { max-width: 100%; overflow-x: auto; margin: 14px 0 0; padding: 12px; border-radius: 6px; background: var(--code); font-size: 12px; }
+.translation-list { border-top: 1px solid var(--border); }
+.translation-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
+.translation-name { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 8px; }
+.translation-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 16px; }
+.translation-form .field { flex: 1 1 auto; margin: 0; }
+.translation-complete { margin: 14px 0 0; }
+.actions, .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.actions { margin: 0; }
+.details-actions { margin-top: 16px; }
+.actions form { display: inline; }
+.form-actions input[type="submit"] { width: auto; }
+
+.pt-show { min-height: 100vh; overflow: auto; }
+.pt-show .post-panel { width: 100%; }
+.pt-show .detail-scroll { overflow: visible; }
+.pt-form-page .container { max-width: 820px; }
+.post-form { width: 100%; }
+.form-card { padding: 0; }
+.form-section { padding: 12px 0 4px; }
+.form-section + .form-section { margin-top: 4px; }
+.form-section h2 { margin-bottom: 12px; }
+.field { margin-bottom: 16px; }
+.field label { display: block; margin-bottom: 5px; font-weight: 600; }
+.field small { display: block; margin-top: 5px; color: var(--muted); }
+.section-intro { margin: -4px 0 12px; color: var(--muted); }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.action-picker, .video-source-picker { display: grid; gap: 10px; min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
+.action-picker { grid-template-columns: repeat(3, 1fr); }
+.video-source-picker { grid-template-columns: repeat(2, 1fr); }
+.action-choice { display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
+.action-choice:hover { border-color: var(--muted); }
+.action-choice.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: 0 0 0 1px var(--accent); }
+.action-choice input { width: 18px; min-width: 18px; min-height: 18px; margin: 2px 0 0; }
+.action-choice span { min-width: 0; }
+.action-choice strong, .action-choice small { display: block; }
+.action-choice small { margin-top: 3px; color: var(--muted); font-weight: 400; line-height: 1.35; }
+.preview-action { align-items: center; gap: 12px; }
+.preview-back { margin-right: auto; color: var(--muted); }
+.checkbox { display: flex !important; align-items: center; gap: 8px; margin-top: 8px; font-weight: 400 !important; }
+.checkbox input { width: 18px; min-height: 18px; }
+.form-actions { padding-top: 12px; }
+.form-video-preview { margin: 2px 0 16px; }
+.form-video-preview .video-preview { margin-bottom: 6px; }
+.form-video-preview > small { color: var(--muted); }
+.rich-editor { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
+.rich-toolbar { display: flex; gap: 4px; padding: 7px; border-bottom: 1px solid var(--border); background: var(--bg); }
+.rich-toolbar button { width: 36px; height: 34px; min-height: 34px; padding: 0; border-color: transparent; background: transparent; font-weight: 600; }
+.rich-content { min-height: 160px; padding: 12px; outline: none; overflow-wrap: anywhere; }
+.rich-content:focus { box-shadow: inset 0 0 0 2px var(--accent); }
+
+@media (max-width: 760px) {
+  body { overflow-x: hidden; font-size: 14px; }
+  .container { padding: 14px 10px 24px; }
+  .page-head { align-items: center; }
+  .page-head .button { min-height: 36px; }
+  .pt-index { overflow-y: auto; overflow-x: hidden; }
+  .pt-index, .pt-index .container { min-height: 100vh; height: auto; }
+  .pt-index .container { padding-bottom: 10px; }
+  .dashboard-shell { display: block; min-height: calc(100vh - 58px); }
+  .dashboard-sidebar, .dashboard-detail { min-height: calc(100vh - 58px); }
+  .dashboard-shell.has-selected .dashboard-sidebar { display: none; }
+  .dashboard-shell:not(.has-selected) .dashboard-detail { display: none; }
+  .record-list { overflow: visible; }
+  .record-row { padding: 12px; }
+  .record-meta { display: none; }
+  .dashboard-detail .post-panel { min-height: calc(100vh - 64px); }
+  .mobile-back { display: block; flex: 0 0 auto; margin: 4px 0 10px; font-size: 13px; }
+  .post-panel, .detail-scroll, .card, dl, dd { min-width: 0; max-width: 100%; }
+  .dashboard-detail .card { width: 100%; }
+  dl { grid-template-columns: 1fr; gap: 3px; }
+  dd { margin-bottom: 8px; }
+  .action-picker, .video-source-picker { grid-template-columns: 1fr; }
+  .form-card { padding: 0; }
+}

data/lib/product_tours/dashboard.js

@@ -0,0 +1,229 @@
+/* product_tours dashboard helpers: strict-CSP-safe confirmations and fields. */
+(function () {
+  "use strict";
+
+  document.addEventListener("click", function (event) {
+    var control = event.target.closest && event.target.closest("[data-confirm]");
+    if (control && !window.confirm(control.getAttribute("data-confirm"))) event.preventDefault();
+  });
+
+  document.addEventListener("change", function (event) {
+    if (event.target.matches("[data-autosubmit]")) event.target.form.requestSubmit();
+    if (event.target.matches("[data-action-target]")) syncActionPicker(event.target.closest("[data-action-picker]") || event.target.form);
+    if (event.target.matches("[data-video-source]")) syncVideoSourcePicker(event.target.closest("[data-video-source-picker]"));
+    if (event.target.matches("[name='post[locale]']")) refreshPostOptions(event.target.form);
+    if (event.target.matches("[data-action-post-select]")) event.target.dataset.selectedKey = event.target.value;
+    if (event.target.matches("[data-product-tour-key]")) normalizeKey(event.target, true);
+    if (event.target.matches("[data-video-preview-input]")) scheduleVideoPreview(event.target, 0);
+  });
+
+  document.addEventListener("input", function (event) {
+    if (event.target.matches("[data-product-tour-key]")) {
+      normalizeKey(event.target, false);
+      var valid = /^[a-z0-9]+(?:[._-][a-z0-9]+)*$/.test(event.target.value);
+      event.target.setCustomValidity(valid || !event.target.value ? "" : "Use lowercase letters and numbers separated by ., _, or -.");
+    }
+    if (event.target.matches("[data-video-preview-input]")) scheduleVideoPreview(event.target, 400);
+    if (event.target.matches("[data-rich-content]")) syncRichEditor(event.target.closest("[data-rich-editor]"));
+  });
+
+  document.addEventListener("focusout", function (event) {
+    if (!event.target.matches("[data-product-tour-key]")) return;
+    normalizeKey(event.target, true);
+    event.target.setCustomValidity("");
+  });
+
+  document.addEventListener("click", function (event) {
+    var button = event.target.closest && event.target.closest("[data-rich-command]");
+    if (!button) return;
+    var editor = button.closest("[data-rich-editor]");
+    var content = editor && editor.querySelector("[data-rich-content]");
+    if (!content) return;
+
+    event.preventDefault();
+    content.focus();
+    var command = button.getAttribute("data-rich-command");
+    var value = null;
+    if (command === "createLink") {
+      value = window.prompt("Link URL", "https://");
+      if (!value) return;
+    }
+    document.execCommand(command, false, value);
+    syncRichEditor(editor);
+  });
+
+  document.addEventListener("submit", function (event) {
+    var editors = event.target.querySelectorAll && event.target.querySelectorAll("[data-rich-editor]");
+    if (editors) editors.forEach(syncRichEditor);
+  });
+
+  function syncRichEditor(editor) {
+    if (!editor) return;
+    var input = editor.querySelector("[data-rich-input]");
+    var content = editor.querySelector("[data-rich-content]");
+    if (input && content) input.value = content.innerHTML;
+  }
+
+  function normalizeKey(input, final) {
+    var value = input.value.toLowerCase()
+      .replace(/[^a-z0-9._-]+/g, "_")
+      .replace(/([._-])[._-]+/g, "$1")
+      .replace(/^[._-]+/, "");
+    if (final) value = value.replace(/[._-]+$/, "");
+    input.value = value;
+  }
+
+  function showFirstVideoFrame(video) {
+    function seek() {
+      if (!Number.isFinite(video.duration) || video.duration <= 0 || video.currentTime > 0) return;
+      try { video.currentTime = Math.min(0.1, video.duration / 2); } catch (_error) {}
+    }
+    video.addEventListener("loadedmetadata", seek, { once: true });
+    if (video.readyState >= 1) seek();
+  }
+
+  function scheduleVideoPreview(input, delay) {
+    if (input.disabled) return;
+    window.clearTimeout(input._productToursPreviewTimer);
+    input._productToursPreviewTimer = window.setTimeout(function () { loadVideoPreview(input); }, delay);
+  }
+
+  function loadVideoPreview(input) {
+    var form = input.closest("form");
+    var preview = form && form.querySelector("[data-video-preview]");
+    if (!preview) return;
+
+    var frame = preview.querySelector("[data-video-preview-frame]");
+    var status = preview.querySelector("[data-video-preview-status]");
+    var value = input.value.trim();
+    var requestId = String(Date.now()) + Math.random();
+    preview.dataset.requestId = requestId;
+    frame.replaceChildren();
+    status.textContent = "";
+    preview.hidden = !value;
+    if (!value) return;
+
+    status.textContent = preview.dataset.loading;
+    var endpoint = new URL(preview.dataset.endpoint, window.location.origin);
+    endpoint.searchParams.set("url", value);
+    fetch(endpoint.toString(), { credentials: "same-origin", headers: { Accept: "application/json" } })
+      .then(function (response) {
+        return response.json().catch(function () { return {}; }).then(function (payload) {
+          if (!response.ok) throw new Error(payload.error || preview.dataset.error);
+          return payload;
+        });
+      })
+      .then(function (video) {
+        if (preview.dataset.requestId !== requestId) return;
+        renderVideoPreview(frame, video, form);
+        status.textContent = "";
+      })
+      .catch(function (error) {
+        if (preview.dataset.requestId !== requestId) return;
+        status.textContent = error.message || preview.dataset.error;
+      });
+  }
+
+  function renderVideoPreview(frame, video, form) {
+    var player;
+    if (video.kind === "iframe") {
+      player = document.createElement("iframe");
+      player.src = video.url;
+      player.title = video.title || "Video preview";
+      player.allow = "autoplay; fullscreen; picture-in-picture";
+      player.setAttribute("allowfullscreen", "");
+      player.referrerPolicy = "strict-origin-when-cross-origin";
+    } else {
+      player = document.createElement("video");
+      player.src = video.url;
+      player.controls = true;
+      player.playsInline = true;
+      player.preload = "metadata";
+      if (video.thumbnail_url) player.poster = video.thumbnail_url;
+      showFirstVideoFrame(player);
+    }
+    frame.appendChild(player);
+
+    var title = form.querySelector("[name='post[title]']");
+    if (title && !title.value.trim() && video.title) title.value = video.title;
+  }
+
+  function syncActionPicker(scope) {
+    if (!scope) return;
+    var picker = scope.matches && scope.matches("[data-action-picker]") ? scope : scope.querySelector("[data-action-picker]");
+    if (!picker) return;
+    var selected = picker.querySelector("[data-action-target]:checked");
+    var target = selected ? selected.value : "close";
+    picker.querySelectorAll(".action-choice").forEach(function (choice) {
+      choice.classList.toggle("selected", choice.contains(selected));
+    });
+
+    picker.parentElement.querySelectorAll("[data-action-fields]").forEach(function (fields) {
+      var active = fields.getAttribute("data-action-fields") === target;
+      fields.hidden = !active;
+      fields.querySelectorAll("input, select, textarea").forEach(function (input) { input.disabled = !active; });
+    });
+
+    var label = picker.parentElement.querySelector("[data-action-label]");
+    if (label) label.placeholder = target === "post" ? "Next" : "Done";
+  }
+
+  function syncVideoSourcePicker(picker) {
+    if (!picker) return;
+    var selected = picker.querySelector("[data-video-source]:checked");
+    var source = selected ? selected.value : "url";
+    picker.querySelectorAll(".action-choice").forEach(function (choice) {
+      choice.classList.toggle("selected", choice.contains(selected));
+    });
+
+    var section = picker.parentElement;
+    section.querySelectorAll("[data-video-source-fields]").forEach(function (fields) {
+      var active = fields.getAttribute("data-video-source-fields") === source;
+      fields.hidden = !active;
+      fields.querySelectorAll("input, select, textarea").forEach(function (input) {
+        input.disabled = !active;
+        if (input.type === "file") input.required = active && picker.dataset.hasUpload !== "true";
+      });
+    });
+
+    var urlInput = section.querySelector("[data-video-preview-input]");
+    if (source === "url" && urlInput && urlInput.value.trim()) scheduleVideoPreview(urlInput, 0);
+  }
+
+  function refreshPostOptions(form) {
+    if (!form) return;
+    var select = form.querySelector("[data-action-post-select]");
+    var data = form.querySelector("[data-action-post-options]");
+    var locale = form.querySelector("[name='post[locale]']");
+    if (!select || !data || !locale) return;
+
+    var posts;
+    try { posts = JSON.parse(data.textContent); } catch (_error) { return; }
+    var selectedKey = select.dataset.selectedKey || select.value;
+    var currentPostId = select.dataset.currentPostId;
+    var placeholder = select.options.length ? select.options[0].textContent : "Select the next post…";
+    select.replaceChildren(new Option(placeholder, ""));
+
+    posts.forEach(function (post) {
+      if (post.locale !== locale.value || String(post.id) === currentPostId) return;
+      select.add(new Option(post.label, post.key));
+    });
+    select.value = selectedKey;
+  }
+
+  function initializeDashboard() {
+    document.querySelectorAll("[data-video-source-picker]").forEach(syncVideoSourcePicker);
+    document.querySelectorAll("[data-action-picker]").forEach(function (picker) {
+      var form = picker.closest("form");
+      refreshPostOptions(form);
+      syncActionPicker(form);
+    });
+    document.querySelectorAll("[data-video-first-frame]").forEach(showFirstVideoFrame);
+    document.querySelectorAll("[data-video-preview-input]").forEach(function (input) {
+      if (!input.disabled && input.value.trim()) scheduleVideoPreview(input, 0);
+    });
+  }
+
+  document.addEventListener("turbo:load", initializeDashboard);
+  initializeDashboard();
+})();

data/lib/product_tours/engine.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require 'rails'
+
+module ProductTours
+  class Engine < ::Rails::Engine
+    isolate_namespace ProductTours
+
+    initializer 'product_tours.helpers' do
+      ActiveSupport.on_load(:action_view) do
+        include ProductTours::WidgetHelper
+      end
+    end
+
+    initializer 'product_tours.routing' do
+      ActionDispatch::Routing::Mapper.include(Module.new do
+        def mount_product_tours(at: ProductTours.config.mount_path, **options)
+          ProductTours.config.mount_path = at
+          mount ProductTours::Engine, at:, **options
+        end
+      end)
+    end
+
+    initializer 'product_tours.content_security_policy', after: :load_config_initializers do |app|
+      ProductTours::ContentSecurityPolicy.apply!(app.config.content_security_policy)
+    end
+  end
+end

data/lib/product_tours/errors.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ProductTours
+  class Error < StandardError; end
+
+  class UnresolvedTriggerError < Error
+    attr_reader :payload
+
+    def initialize(payload)
+      @payload = payload
+      super("Product tour #{payload[:key].inspect} could not be resolved (#{payload[:reason]})")
+    end
+  end
+end

data/lib/product_tours/seeds.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module ProductTours
+  module Seeds
+    DEMO_LOCALES = %w[en fr bg].freeze
+
+    POSTS = [
+      {
+        key: 'demo_walkthrough_finish',
+        title: 'You are ready',
+        action_label: 'Get started'
+      },
+      {
+        key: 'demo_direct_video',
+        title: 'Direct MP4 tutorial',
+        video_url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+        action_post_key: 'demo_walkthrough_finish'
+      },
+      {
+        key: 'demo_voomly',
+        title: 'Voomly tutorial',
+        video_url: 'https://share.voomly.com/v/CxfDyNYKE0SBEBV-zVAUHo8rNwS2eLBr418z81gd6GlkKlLfJ',
+        action_post_key: 'demo_direct_video'
+      },
+      {
+        key: 'demo_tella',
+        title: 'Tella tutorial',
+        video_url: 'https://www.tella.tv/video/add-your-logo-to-videos-39y0',
+        action_post_key: 'demo_voomly'
+      },
+      {
+        key: 'demo_loom',
+        title: 'Loom tutorial',
+        video_url: 'https://www.loom.com/share/e5b8c04bca094dd8a5507925ab887002',
+        action_post_key: 'demo_tella'
+      },
+      {
+        key: 'demo_vimeo',
+        title: 'Vimeo tutorial',
+        video_url: 'https://vimeo.com/76979871',
+        action_post_key: 'demo_loom'
+      },
+      {
+        key: 'demo_youtube',
+        title: 'YouTube tutorial',
+        video_url: 'https://www.youtube.com/watch?v=M7lc1UVf-VE',
+        action_post_key: 'demo_vimeo'
+      },
+      {
+        key: 'demo_walkthrough_features',
+        title: 'Compare every supported video provider',
+        action_post_key: 'demo_youtube'
+      },
+      {
+        key: 'demo_walkthrough_start',
+        title: 'Video provider walkthrough',
+        action_post_key: 'demo_walkthrough_features'
+      },
+      {
+        key: 'demo_getting_started',
+        title: 'Getting started',
+        action_label: 'Open settings',
+        action_url: '/settings'
+      },
+      {
+        key: 'demo_draft',
+        title: 'Draft tutorial',
+        status: 'draft'
+      }
+    ].freeze
+
+    BUTTONS = [
+      ['demo_walkthrough_start', 'Try the multi-step walkthrough'],
+      ['demo_youtube', 'Open the YouTube tutorial'],
+      ['demo_vimeo', 'Open the Vimeo tutorial'],
+      ['demo_loom', 'Open the Loom tutorial'],
+      ['demo_tella', 'Open the Tella tutorial'],
+      ['demo_voomly', 'Open the Voomly tutorial'],
+      ['demo_direct_video', 'Open the direct video tutorial'],
+      ['demo_getting_started', 'Open the getting started guide'],
+      ['demo_draft', 'Try an unpublished tutorial'],
+      ['demo_missing_post', 'Try a missing tutorial']
+    ].freeze
+
+    TRANSLATIONS = {
+      'fr' => {
+        'demo_walkthrough_finish' => { title: 'Vous êtes prêt', action_label: 'Commencer' },
+        'demo_walkthrough_features' => { title: 'Comparez tous les fournisseurs vidéo pris en charge' },
+        'demo_walkthrough_start' => { title: 'Présentation des fournisseurs vidéo' },
+        'demo_youtube' => { title: 'Tutoriel YouTube' },
+        'demo_vimeo' => { title: 'Tutoriel Vimeo' },
+        'demo_loom' => { title: 'Tutoriel Loom' },
+        'demo_tella' => { title: 'Tutoriel Tella' },
+        'demo_voomly' => { title: 'Tutoriel Voomly' },
+        'demo_direct_video' => { title: 'Tutoriel vidéo MP4' },
+        'demo_getting_started' => { title: 'Bien démarrer', action_label: 'Ouvrir les paramètres' },
+        'demo_draft' => { title: 'Tutoriel brouillon' }
+      },
+      'bg' => {
+        'demo_walkthrough_finish' => { title: 'Готови сте', action_label: 'Започнете' },
+        'demo_walkthrough_features' => { title: 'Сравнете всички поддържани видео доставчици' },
+        'demo_walkthrough_start' => { title: 'Обиколка на видео доставчиците' },
+        'demo_youtube' => { title: 'Видео урок в YouTube' },
+        'demo_vimeo' => { title: 'Видео урок във Vimeo' },
+        'demo_loom' => { title: 'Видео урок в Loom' },
+        'demo_tella' => { title: 'Видео урок в Tella' },
+        'demo_voomly' => { title: 'Видео урок във Voomly' },
+        'demo_direct_video' => { title: 'MP4 видео урок' },
+        'demo_getting_started' => { title: 'Първи стъпки', action_label: 'Отвори настройките' },
+        'demo_draft' => { title: 'Чернова на урок' }
+      }
+    }.freeze
+
+    def self.load!(locale: I18n.default_locale, status: 'published')
+      POSTS.map do |attributes|
+        locale = locale.to_s
+        key = attributes.fetch(:key)
+        localized = TRANSLATIONS.fetch(locale, {}).fetch(key, {})
+        post = ProductTours::Post.find_or_initialize_by(locale: locale, key: key)
+        post.assign_attributes(attributes.merge(localized).merge(status: attributes.fetch(:status, status)))
+        post.save!
+        post
+      end
+    end
+
+    def self.load_all!(locales: DEMO_LOCALES, status: 'published')
+      locales.flat_map { |locale| load!(locale: locale, status: status) }
+    end
+
+    def self.load_for_install!(environment: defined?(Rails) && Rails.env)
+      return [] unless environment&.development?
+
+      ProductTours::Post.reset_column_information
+      load!
+    end
+
+    def self.trigger_html
+      lines = ['<div class="product-tours-demo">']
+      BUTTONS.each do |key, label|
+        lines << %(  <button type="button" data-product-tour="#{key}">#{label}</button>)
+      end
+      lines << '</div>'
+      lines << '<%= product_tours_tag %>'
+      lines.join("\n")
+    end
+  end
+end

data/lib/product_tours/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module ProductTours
+  VERSION = '0.1.0'
+end