product_tours 0.3.0 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea098df5cd9d109566f8f7561a53e182932258742abd06b427596f2b8deb0574
-  data.tar.gz: f7607d43d7cc8eee2174c9232279cf192f6f74d446b1f4c7da246be752f4d2fe
+  metadata.gz: 397e2fbd273b707e9a16302852704ed8e5cc6daf410f3255fe3fa819047163b8
+  data.tar.gz: c040cac638d52a7484f4ef109732211e181f0b103bdbcd938f0d6c3c7b8d10e1
 SHA512:
-  metadata.gz: d95991dc7543548549f11544d9f7c898b31a09fae6a06bd23c78e81df86937a2a5edca0c8127f6f7e51a10cd50b2c235fd19e87aa1fedaa8e54bcc8f66872d69
-  data.tar.gz: 1f1cd6f01c210a157d67b1b736a9a0540be356aabc875eb4e0daac5e91e3f6864dd9995413b324a90400ac35d9a5cc83bc12792d0d832111bf43c147e66c5273
+  metadata.gz: b22e2391759e9a49d90728b9709650e5f0f2d1001fdf36d71e4c8d2c494e853007f70794b93c92762363502872f024970cf62660fa4639702aac82c854b2f9ab
+  data.tar.gz: e2ceef66890c00c8a5f3f9293f946e35c366215b08a584a52e49408cb858f245affe2eab62caece0f1b7286f5b5944da9358f3315777b95208e962e715b83b2f

data/AGENTS.md

@@ -81,7 +81,8 @@ YouTube, Vimeo, Loom, Tella, Voomly, a direct MP4/WebM URL, or an uploaded file
 
 ### Lifecycle events
 
-Subscribe in an initializer; there is no callback config to set.
+Subscribe in an initializer when your normal request middleware already sets
+host identity:
 
 ```ruby
 ActiveSupport::Notifications.subscribe("product_tours.completed") do |*, payload|
@@ -91,6 +92,20 @@ end
 
 Names: `product_tours.viewed`, `product_tours.dismissed`, `product_tours.completed`, and `product_tours.unresolved_trigger` — the last one fires when a `data-product-tour` button names a key that does not resolve. Subscribe to it in development; it turns "my button does nothing" into a log line naming the key.
 
+The public widget controller deliberately does not inherit the host's controller.
+If that means a subscriber cannot see the host's current user/account context,
+configure the request-aware lifecycle hook instead:
+
+```ruby
+config.on_event = lambda do |name, payload, request|
+  user = request.env["warden"]&.user
+  ProductTourEventJob.perform_later(name, payload, user&.id)
+end
+```
+
+It receives only `viewed`, `dismissed`, and `completed`, runs inline, and logs
+exceptions without breaking the visitor flow. Keep it fast or enqueue a job.
+
 ### Do not
 
 - **Do not copy the widget JavaScript into `app/javascript`, or add a `<script>` tag for it.** `product_tours_tag` renders what is needed and the engine serves the code. There is no build step and nothing for esbuild/importmap/Tailwind to know about.
@@ -101,7 +116,7 @@ Names: `product_tours.viewed`, `product_tours.dismissed`, `product_tours.complet
 
 ### Configuration
 
-There are five options. That is the whole surface.
+There are seven options. That is the whole surface.
 
 | Option | Default | What it does |
 | --- | --- | --- |
@@ -109,6 +124,7 @@ There are five options. That is the whole surface.
 | `enabled` | everyone | Per-request gate for the widget and its endpoints |
 | `base_controller_class` | `ActionController::Base` | Controller the dashboard inherits. Name your admin's and it adopts that layout, helpers, authentication and request context. Public endpoints never inherit it. |
 | `admin_layout` | `product_tours/application` | Render the dashboard inside your admin shell |
+| `on_event` | no-op | Handle lifecycle events with `(name, payload, request)` when host identity must be resolved from the raw request |
 | `mount_path` | `"/product_tours"` | Keep in sync with `mount_product_tours at:` |
 | `storage_service` | app default | Active Storage service for uploaded video (a `storage.yml` key) |
 
@@ -152,6 +168,6 @@ Conventions this codebase holds to — follow them rather than the first thing t
 - **Uploaded media streams through the engine's gate**, never a public blob URL.
 - **The CSP patch is additive.** It appends to existing sources and drops `'none'` rather than replacing a host's policy — do not let it start overwriting directives.
 - **The dummy app pins `config.active_job.queue_adapter = :test`.** Do not remove it or let it drift back to the `:async` default. Attaching a video enqueues Active Storage's analysis job, and `:async` runs it on a background thread that checks out its own connection — writes no test transaction covers, landing in the middle of whatever runs next. That is a suite that fails order-dependently in a test which never created a row, and it is miserable to trace back.
-- **`lib/product_tours/dashboard.css` is half shared.** Everything above the `GEM-SPECIFIC` banner is the design system all five gems in the family ship — the same tokens, the same `.page-head`/`.tabs`/`.filters`/`.card`/`.badge`/`button`, the same `.dashboard-shell` + `.record-row` + `.detail-panel` two-pane dashboard — identical in every repo apart from the `pt` prefix. Diff it against a sibling before changing it, and carry the change to the other four. Anything only this gem has goes below the banner. New dashboard markup reuses the shared class names rather than inventing a domain-specific one.
+- **`lib/product_tours/dashboard.css` is half shared.** Everything above the `GEM-SPECIFIC` banner is the design system all five gems in the family ship — the same tokens, the same `.page-head`/`.tabs`/`.filters`/`.card`/`.badge`/`button`/`.status-switch`, the same `.dashboard-shell` + `.record-row` + `.detail-panel` two-pane dashboard — identical in every repo apart from the `pt` prefix. Diff it against a sibling before changing it, and carry the change to the other four. Anything only this gem has goes below the banner. New dashboard markup reuses the shared class names rather than inventing a domain-specific one.
 - Every user-facing change bumps `lib/product_tours/version.rb` and adds a `CHANGELOG.md` entry (Keep a Changelog format) that says what it costs, not only what it adds.
 - Commit messages are prose that explains the tradeoff — read `git log` before writing one.

data/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [Unreleased]
+
+## [0.3.3] - 2026-08-08
+
+- **The demo walkthrough is now a tour of Product Tours itself.** Its linked
+  steps explain host-owned triggers, post chaining, optional video, drafts,
+  locale-stable keys, lifecycle events, direct and uploaded video delivery, and
+  completion. The standalone buttons still exercise every provider, a draft,
+  a missing key, and an action URL, while making the purpose of each case clear.
+- English, French, and Bulgarian demo posts carry the educational copy. Rich
+  descriptions are added when Action Text is installed; title-only installs
+  still get the guided sequence. The provider videos remain generic examples.
+- `product_tours:seed_demo` preserves demo keys and refreshes their content, so
+  rerunning it overwrites edits to those gem-owned posts. Tutorials with other
+  keys are not touched.
+
+## [0.3.2] - 2026-08-08
+
+- **Video tutorials are comfortably watchable without entering full screen.**
+  Text-only dialogs remain compact at 440px, while a tutorial containing video
+  automatically expands to 760px on desktop. Once a video appears in an open
+  walkthrough, the dialog stays wide for its remaining steps so the layout does
+  not jump back and forth. Mobile dialogs remain full-screen. There is no new
+  configuration or API to adopt.
+
+## [0.3.1] - 2026-08-08
+
+- **Hosts can handle lifecycle events with their own request context.** Set
+  `config.on_event` to a callable accepting `(name, payload, request)` when a
+  `viewed`, `dismissed`, or `completed` signal must resolve a signed session,
+  user, account, or tenant that deliberately does not belong in the gem. The
+  existing `ActiveSupport::Notifications` events and their minimal payloads are
+  unchanged. The hook runs inline, so slow work should be enqueued; exceptions
+  are logged and never turn a working tutorial action into a visitor-facing
+  failure.
+
 ## 0.3.0
 
 - **One design system across the family.** The stylesheet now opens with a
@@ -60,8 +96,6 @@
   `remove_index :product_tours_posts, :locale`.
 - A `BackboneTest` now fails the build on any of the above regressing.
 
-## [Unreleased]
-
 ## [0.1.2] - 2026-08-04
 
 - Added `AGENTS.md`: install and integration instructions written for coding
@@ -122,6 +156,8 @@
 - Removed generic tutorial duplication now that translations provide the only
   intentional content-copying workflow.
 
-[Unreleased]: https://github.com/yshmarov/product_tours/compare/v0.1.1...HEAD
+[Unreleased]: https://github.com/yshmarov/product_tours/compare/v0.3.2...HEAD
+[0.3.2]: https://github.com/yshmarov/product_tours/compare/v0.3.1...v0.3.2
+[0.3.1]: https://github.com/yshmarov/product_tours/compare/v0.3.0...v0.3.1
 [0.1.1]: https://github.com/yshmarov/product_tours/compare/v0.1.0...v0.1.1
 [0.1.0]: https://github.com/yshmarov/product_tours/releases/tag/v0.1.0

data/README.md

@@ -92,8 +92,11 @@ the things it should not do. It ships inside the gem, so
 
 <img src="docs/screenshots/03-mobile.jpg" alt="The product tutorial modal filling a mobile viewport with a video and primary action" width="390">
 
-On screens up to 480px the modal becomes a full-screen sheet, respects safe
-areas, and follows `visualViewport` while the mobile keyboard is open.
+Text-only tutorials stay compact at 440px on desktop. A tutorial with video
+automatically opens at up to 760px, and a walkthrough stays at that size after
+its first video so the layout does not jump between steps. On screens up to
+480px the modal becomes a full-screen sheet, respects safe areas, and follows
+`visualViewport` while the mobile keyboard is open.
 
 ## Why a gem
 
@@ -228,6 +231,7 @@ Everything is optional — a development install works with zero config. In
 | `authorize_admin` | development only | **Who can manage content at the mount path** |
 | `base_controller_class` | `ActionController::Base` | Controller the dashboard inherits — name your admin's and it adopts its layout, helpers and auth |
 | `admin_layout` | gem layout | Just the shell, if you don't want the whole controller |
+| `on_event` | no-op | Handle lifecycle events with the raw request and host-owned identity/account context |
 | `storage_service` | app default | Named Active Storage service for uploaded videos |
 | `mount_path` | `/product_tours` | Keep in sync only when mounting the engine manually |
 
@@ -236,6 +240,9 @@ ProductTours.configure do |config|
   config.enabled = ->(request) { request.env["warden"]&.user.present? }
   config.authorize_admin = ->(request) { request.env["warden"]&.user&.admin? }
   config.admin_layout = "admin/application"
+  config.on_event = lambda do |name, payload, request|
+    AnalyticsJob.perform_later(name, payload, request.session[:user_id])
+  end
   config.storage_service = :product_tours
 end
 ```
@@ -302,6 +309,20 @@ end
 Your subscriber can attach `Current.user` or account context. That identity does
 not need to become product-tour configuration.
 
+If the engine's public controller does not run your host controller callbacks,
+use `on_event` instead. It receives the same event name and payload plus the raw
+request, so it can safely resolve the host's signed session:
+
+```ruby
+config.on_event = lambda do |name, payload, request|
+  user = request.env["warden"]&.user
+  ProductTourEventJob.perform_later(name, payload, user&.id)
+end
+```
+
+The hook runs inline; enqueue slow work. Exceptions are logged and do not break
+the visitor flow. `product_tours.unresolved_trigger` remains a notification only.
+
 ## Broken triggers fail loudly, not publicly
 
 `data-product-tour="key"` is a contract between code and dashboard content.

data/app/controllers/product_tours/tours_controller.rb

@@ -32,12 +32,20 @@ module ProductTours
         page_url: clean_page_url(params[:page_url]),
         source: params[:source].to_s.presence
       }
-      ActiveSupport::Notifications.instrument("product_tours.#{action}", payload)
+      event_name = "product_tours.#{action}"
+      ActiveSupport::Notifications.instrument(event_name, payload)
+      notify_host(event_name, payload)
       head :no_content
     end
 
     private
 
+    def notify_host(event_name, payload)
+      ProductTours.config.on_event.call(event_name, payload, request)
+    rescue StandardError => e
+      Rails.logger.error("product_tours: on_event hook raised #{e.class}: #{e.message}")
+    end
+
     def post_payload(post)
       video = post.resolved_video
       video[:url] = media_path(post) if video&.dig(:kind) == 'upload'

data/lib/generators/product_tours/install/templates/initializer.rb

@@ -21,6 +21,13 @@ ProductTours.configure do |config|
   # Tutorials resolve in the page's current I18n.locale and fall back to
   # I18n.default_locale when no translation exists.
 
+  # Optional lifecycle hook. Receives the event name, minimal payload, and raw
+  # request so the host can resolve its own user/account context. Runs inline;
+  # enqueue slow work. Hook errors are logged and never break the visitor flow.
+  # config.on_event = lambda do |name, payload, request|
+  #   AnalyticsJob.perform_later(name, payload, request.session[:user_id])
+  # end
+
   # Optional dedicated Active Storage service for uploaded videos.
   # config.storage_service = :product_tours
 

data/lib/product_tours/configuration.rb

@@ -7,7 +7,7 @@ module ProductTours
     DEFAULT_ADMIN_LAYOUT = 'product_tours/application'
 
     attr_accessor :enabled, :authorize_admin, :admin_layout, :mount_path,
-                  :storage_service
+                  :storage_service, :on_event
 
     # The controller the DASHBOARD inherits from, as a String so it resolves
     # lazily rather than at config time. Default: a plain
@@ -31,6 +31,7 @@ module ProductTours
       @base_controller_class = 'ActionController::Base'
       @mount_path = '/product_tours'
       @storage_service = nil
+      @on_event = ->(_name, _payload, _request) {}
     end
 
     def widget_endpoint = "#{mount_path.to_s.chomp('/')}/widget"

data/lib/product_tours/dashboard.css

@@ -144,6 +144,19 @@
   & .actions form { display: inline; }
   & .form-actions { padding-top: 12px; }
 
+  /* Status switch: one pill holding every state a record can be in, the state it
+     is in now lit. Each other segment is a submit button, so moving a record
+     takes one click and no JavaScript; the current segment is a `type="button"`
+     so clicking it cannot re-file the record it is already filed under. Two
+     states or five, the pill sizes itself. A gem tints the lit segment with its
+     own status colour — see the `GEM-SPECIFIC` section. */
+  & .status-switch { display: inline-flex; flex: 0 0 auto; margin: 0; padding: 3px; border: 1px solid var(--pt-border); border-radius: 999px; background: var(--pt-bg); }
+  & .status-switch button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--pt-muted); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .16s ease, color .16s ease; }
+  & .status-switch button:hover { border: 0; background: color-mix(in srgb, var(--pt-muted) 12%, transparent); color: var(--pt-text); }
+  & .status-switch button.current { background: var(--pt-surface); color: var(--pt-text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); cursor: default; }
+  & .status-switch button.current:hover { background: var(--pt-surface); }
+  & .panel-head .status-switch { margin-left: auto; }
+
   & .card { overflow: hidden; border: 1px solid var(--pt-border); border-radius: 12px; background: var(--pt-surface); }
   & .card.pad { padding: 16px; overflow: visible; }
   & table { width: 100%; border-collapse: collapse; }
@@ -266,6 +279,7 @@
     & .dashboard-detail .detail-panel { min-height: calc(100vh - 64px); }
     & .mobile-back { display: block; flex: 0 0 auto; margin: 4px 0 10px; font-size: 13px; }
     & .panel-head h1 { font-size: 18px; }
+    & .status-switch button { padding: 0 9px; font-size: 12px; }
     & dl { grid-template-columns: 1fr; gap: 3px; }
     & dd { margin-bottom: 8px; }
   }

data/lib/product_tours/seeds.rb

@@ -7,107 +7,221 @@ module ProductTours
     POSTS = [
       {
         key: 'demo_walkthrough_finish',
-        title: 'You are ready',
-        action_label: 'Get started'
+        title: 'You completed the Product Tours tour',
+        description: '<p>Completing this step emits <code>product_tours.completed</code>. ' \
+                     'Replace these demo posts with one short guide tied to a real customer success moment.</p>',
+        action_label: 'Finish tour'
       },
       {
         key: 'demo_direct_video',
-        title: 'Direct MP4 tutorial',
+        title: 'Keep video delivery flexible',
+        description: '<p>This placeholder uses a direct MP4. You can also attach a video with Active Storage; ' \
+                     'uploaded media streams through the engine rather than a public blob URL.</p>',
         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',
+        title: 'Observe the lifecycle',
+        description: '<p>Subscribe to viewed, dismissed, completed, and unresolved-trigger notifications, ' \
+                     'or use <code>config.on_event</code> when you need the raw request to resolve a user.</p>',
         video_url: 'https://share.voomly.com/v/CxfDyNYKE0SBEBV-zVAUHo8rNwS2eLBr418z81gd6GlkKlLfJ',
         action_post_key: 'demo_direct_video'
       },
       {
         key: 'demo_tella',
-        title: 'Tella tutorial',
+        title: 'Translate one stable key',
+        description: '<p>A tutorial keeps the same key in every locale. Product Tours resolves the visitor locale ' \
+                     'and falls back to your default locale, so triggers never need translated keys.</p>',
         video_url: 'https://www.tella.tv/video/add-your-logo-to-videos-39y0',
         action_post_key: 'demo_voomly'
       },
       {
         key: 'demo_loom',
-        title: 'Loom tutorial',
+        title: 'Draft safely, then publish',
+        description: '<p>The seeded <code>demo_draft</code> post appears in the dashboard but cannot open for ' \
+                     'visitors. Use drafts to review copy, actions, and video before a trigger goes live.</p>',
         video_url: 'https://www.loom.com/share/e5b8c04bca094dd8a5507925ab887002',
         action_post_key: 'demo_tella'
       },
       {
         key: 'demo_vimeo',
-        title: 'Vimeo tutorial',
+        title: 'Chain focused steps',
+        description: '<p>This Next button follows <code>action_post_key</code>. Each step is an ordinary tutorial, ' \
+                     'so you can reuse it alone or connect it into a walkthrough without host-side JavaScript.</p>',
         video_url: 'https://vimeo.com/76979871',
         action_post_key: 'demo_loom'
       },
       {
         key: 'demo_youtube',
-        title: 'YouTube tutorial',
+        title: 'Add video only when it helps',
+        description: '<p>This generic YouTube clip is only a provider example. Replace it with your own explanation, ' \
+                     'or leave video blank for a fast text-only guide.</p>',
         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',
+        title: 'Trigger a tour from your own UI',
+        description: '<p>Add <code>data-product-tour="demo_walkthrough_start"</code> to any button or link. ' \
+                     'The single <code>product_tours_tag</code> in your layout handles every trigger on the page.</p>',
         action_post_key: 'demo_youtube'
       },
       {
         key: 'demo_walkthrough_start',
-        title: 'Video provider walkthrough',
+        title: 'Welcome to Product Tours',
+        description: '<p>This is a real multi-step tour created by <code>product_tours:seed_demo</code>. ' \
+                     'Continue to learn the public API by using the same experience your customers will see.</p>',
         action_post_key: 'demo_walkthrough_features'
       },
       {
         key: 'demo_getting_started',
-        title: 'Getting started',
-        action_label: 'Open settings',
+        title: 'Link to the next real action',
+        description: '<p>An action URL completes the tutorial and sends the visitor into your product. ' \
+                     'Point it at the screen where they can immediately use what the guide taught.</p>',
+        action_label: 'Try the action URL',
         action_url: '/settings'
       },
       {
         key: 'demo_draft',
-        title: 'Draft tutorial',
+        title: 'This draft stays invisible to visitors',
+        description: '<p>You can edit and preview this post in the dashboard, but its demo trigger will not resolve ' \
+                     'until you publish it.</p>',
         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']
+      ['demo_walkthrough_start', 'Take the self-guided Product Tours tour'],
+      ['demo_youtube', 'Preview a YouTube video step'],
+      ['demo_vimeo', 'Preview a Vimeo video step'],
+      ['demo_loom', 'Preview a Loom video step'],
+      ['demo_tella', 'Preview a Tella video step'],
+      ['demo_voomly', 'Preview a Voomly video step'],
+      ['demo_direct_video', 'Preview a direct MP4 step'],
+      ['demo_getting_started', 'Try a tour that opens a product page'],
+      ['demo_draft', 'Confirm that draft tours stay hidden'],
+      ['demo_missing_post', 'Confirm that missing keys are instrumented']
     ].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' }
+        'demo_walkthrough_finish' => {
+          title: 'Vous avez terminé la visite de Product Tours',
+          description: '<p>Cette étape émet <code>product_tours.completed</code>. Remplacez ces exemples par ' \
+                       'un guide court lié à un vrai moment de réussite client.</p>',
+          action_label: 'Terminer la visite'
+        },
+        'demo_walkthrough_features' => {
+          title: 'Déclenchez une visite depuis votre interface',
+          description: '<p>Ajoutez <code>data-product-tour="demo_walkthrough_start"</code> à un bouton ou un lien. ' \
+                       '<code>product_tours_tag</code> gère tous les déclencheurs de la page.</p>'
+        },
+        'demo_walkthrough_start' => {
+          title: 'Bienvenue dans Product Tours',
+          description: '<p>Ceci est une vraie visite en plusieurs étapes créée par ' \
+                       '<code>product_tours:seed_demo</code>. Continuez pour découvrir son API publique.</p>'
+        },
+        'demo_youtube' => {
+          title: 'Ajoutez une vidéo seulement si elle aide',
+          description: '<p>Cette vidéo YouTube générique illustre seulement le fournisseur. Remplacez-la par la ' \
+                       'vôtre, ou laissez le champ vide pour un guide textuel rapide.</p>'
+        },
+        'demo_vimeo' => {
+          title: 'Enchaînez des étapes ciblées',
+          description: '<p>Le bouton Suivant utilise <code>action_post_key</code>. Reliez des guides sans écrire ' \
+                       'de JavaScript dans votre application.</p>'
+        },
+        'demo_loom' => {
+          title: 'Préparez en brouillon, puis publiez',
+          description: '<p>Le post <code>demo_draft</code> est visible dans le tableau de bord, mais pas pour les ' \
+                       'visiteurs. Vérifiez le contenu avant de publier.</p>'
+        },
+        'demo_tella' => {
+          title: 'Traduisez une clé stable',
+          description: '<p>Une visite garde la même clé dans chaque langue. Le déclencheur ne doit donc jamais ' \
+                       'connaître la clé traduite.</p>'
+        },
+        'demo_voomly' => {
+          title: 'Observez le cycle de vie',
+          description: '<p>Abonnez-vous aux événements viewed, dismissed, completed et unresolved-trigger, ' \
+                       'ou utilisez <code>config.on_event</code> avec la requête.</p>'
+        },
+        'demo_direct_video' => {
+          title: 'Gardez le choix de la diffusion vidéo',
+          description: '<p>Cet exemple utilise un MP4 direct. Active Storage permet aussi les fichiers envoyés, ' \
+                       'diffusés par le moteur sans URL de blob publique.</p>'
+        },
+        'demo_getting_started' => {
+          title: "Ouvrez l'action réelle suivante",
+          description: '<p>Une URL d’action termine la visite et envoie le visiteur vers la page où il peut ' \
+                       'appliquer ce qu’il vient d’apprendre.</p>',
+          action_label: "Essayer l'URL d'action"
+        },
+        'demo_draft' => {
+          title: 'Ce brouillon reste invisible aux visiteurs',
+          description: '<p>Modifiez-le dans le tableau de bord : son déclencheur ne fonctionnera qu’après sa ' \
+                       'publication.</p>'
+        }
       },
       '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: 'Чернова на урок' }
+        'demo_walkthrough_finish' => {
+          title: 'Завършихте обиколката на Product Tours',
+          description: '<p>Тази стъпка излъчва <code>product_tours.completed</code>. Заменете примерите с кратък ' \
+                       'урок, свързан с реален успех на клиента.</p>',
+          action_label: 'Край на обиколката'
+        },
+        'demo_walkthrough_features' => {
+          title: 'Стартирайте обиколка от вашия интерфейс',
+          description: '<p>Добавете <code>data-product-tour="demo_walkthrough_start"</code> към бутон или връзка. ' \
+                       '<code>product_tours_tag</code> обслужва всички тригери на страницата.</p>'
+        },
+        'demo_walkthrough_start' => {
+          title: 'Добре дошли в Product Tours',
+          description: '<p>Това е истинска обиколка от няколко стъпки, създадена от ' \
+                       '<code>product_tours:seed_demo</code>. Продължете, за да научите публичния API.</p>'
+        },
+        'demo_youtube' => {
+          title: 'Добавяйте видео само когато помага',
+          description: '<p>Този общ YouTube клип е само пример за доставчик. Заменете го със свой или оставете ' \
+                       'полето празно за бърз текстов урок.</p>'
+        },
+        'demo_vimeo' => {
+          title: 'Свържете кратки, фокусирани стъпки',
+          description: '<p>Бутонът Напред използва <code>action_post_key</code>. Свързвайте уроци без JavaScript ' \
+                       'в приложението домакин.</p>'
+        },
+        'demo_loom' => {
+          title: 'Подгответе чернова, после публикувайте',
+          description: '<p>Публикацията <code>demo_draft</code> се вижда в таблото, но не и от посетителите. ' \
+                       'Прегледайте съдържанието преди публикуване.</p>'
+        },
+        'demo_tella' => {
+          title: 'Преведете един постоянен ключ',
+          description: '<p>Една обиколка използва същия ключ на всеки език. Тригерът никога не се нуждае от ' \
+                       'преведен ключ.</p>'
+        },
+        'demo_voomly' => {
+          title: 'Наблюдавайте жизнения цикъл',
+          description: '<p>Абонирайте се за viewed, dismissed, completed и unresolved-trigger или използвайте ' \
+                       '<code>config.on_event</code> с текущата заявка.</p>'
+        },
+        'demo_direct_video' => {
+          title: 'Изберете как да доставяте видеото',
+          description: '<p>Този пример използва директен MP4. Active Storage поддържа и качени файлове, които ' \
+                       'се предават през двигателя без публичен blob URL.</p>'
+        },
+        'demo_getting_started' => {
+          title: 'Отворете следващото реално действие',
+          description: '<p>URL действието завършва урока и отвежда посетителя до мястото, където може веднага ' \
+                       'да използва наученото.</p>',
+          action_label: 'Изпробвайте URL действието'
+        },
+        'demo_draft' => {
+          title: 'Тази чернова остава скрита за посетители',
+          description: '<p>Редактирайте я в таблото; нейният тригер няма да работи, докато не я ' \
+                       'публикувате.</p>'
+        }
       }
     }.freeze
 
@@ -117,7 +231,10 @@ module ProductTours
         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)))
+        seed_attributes = attributes.merge(localized).merge(status: attributes.fetch(:status, status))
+        description = seed_attributes.delete(:description)
+        post.assign_attributes(seed_attributes)
+        post.description = description if ProductTours::Post.description_supported?
         post.save!
         post
       end

data/lib/product_tours/version.rb

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

data/lib/product_tours/widget.js

@@ -90,6 +90,8 @@
 
   function renderPost(post, source) {
     if (!dialog) return;
+    var hasVideo = Boolean(post.video && post.video.url);
+    if (hasVideo) dialog.classList.add("pt-dialog-video");
     var existing = dialog.querySelector(".pt-content");
     if (existing) existing.remove();
     currentPost = post;
@@ -108,7 +110,7 @@
     head.appendChild(closeButton);
     content.appendChild(head);
 
-    if (post.video && post.video.url) content.appendChild(videoNode(post.video, post.title));
+    if (hasVideo) content.appendChild(videoNode(post.video, post.title));
 
     if (post.descriptionHtml) {
       var description = element("div", "pt-description");
@@ -332,6 +334,7 @@
       ".pt-overlay{position:fixed;inset:0;z-index:2147482000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}",
       ".pt-overlay,.pt-overlay *{box-sizing:border-box}",
       ".pt-dialog{width:100%;max-width:440px;max-height:92vh;overflow:auto;overscroll-behavior:contain;background:#fff;color:#1c2024;border-radius:14px;padding:20px;font:14px/1.5 system-ui,-apple-system,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.35);outline:none}",
+      ".pt-dialog-video{max-width:760px}",
       ".pt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0 0 12px}",
       ".pt-title{margin:0;font-size:17px;line-height:1.5;font-weight:700;overflow-wrap:anywhere}",
       ".pt-close{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:inherit;padding:2px 6px}",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: product_tours
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.3
 platform: ruby
 authors:
 - Yaroslav Shmarov
@@ -131,7 +131,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.10
 specification_version: 4
 summary: Self-hosted product tours and video tutorials for Rails apps.
 test_files: []