product_tours 0.2.2 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b0129cca5d98bc11af9f2a43127778eeb3a86b0b4ff06b8ae87dece57ad69c0
-  data.tar.gz: 74f8b8de528cc13b188113ed76ea79167b562cd9e4ad8753a278c41a0331ddfd
+  metadata.gz: bca51e6535dbdd38d6d683ee0ea95e430acbefd41479f356e1c0e7c330c64697
+  data.tar.gz: fce14b868cabf23946d5658aa5c9362d5b0e3df92e326b27f31164b9590e01cd
 SHA512:
-  metadata.gz: 3e0d415289f543c0dc05c0b5546eb60d7700619633b0aa9c9b3605c4b7f01658337f9f55728fbb00814eaa5f06d2f1cf89e7b90c4ec154c1847aad8deca91515
-  data.tar.gz: c28e01d259545cc4f09b930b46c340a3f7981336dc1fe1f681bedaf92f37543d53fb4657f6625affd793c4bce42560bdf1ced10eaf4683de8f00129c729a9ad2
+  metadata.gz: 1dec9e04d694dd26b2baafbe9eb6226370ccb728c500c086ebc387e8cf6bdfa7433f5588772b9a9e61be26e2d5558af59dd4d096424a429cc9004abed73b3084
+  data.tar.gz: b86e2d428a86bb9708cbb709eb80e0e5de1ead8bf3a18d32e78c38d64a9e24ce7d41a2bbaea3ee7d214e8d4dadecc74bc35dce1ffcd74e570eb7a78ea3095281

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,5 +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`/`.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,43 @@
 # Changelog
 
+## [Unreleased]
+
+## [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
+  shared core — the colour tokens, `.page-head`, `.tabs`, `.filters`, `.card`,
+  `.badge`, buttons and form controls, and the `.dashboard-shell` +
+  `.record-row` + `.detail-panel` two-pane dashboard — identical in all five
+  gems of the family, apart from the `--pt-` prefix. The five had drifted:
+  sidebars between 380px and 430px, reading columns between 860px and 1020px,
+  two different tab styles and three different button styles. The sidebar is
+  now 330–430px everywhere, a reading page 1020px, a dashboard 1280px.
+  Everything below the `GEM-SPECIFIC` banner is what only this gem has.
+- **The dashboard markup uses the shared class names.** `.post-panel` is
+  `.detail-panel`; everything else already used the shared vocabulary, which
+  this gem's dashboard had the most of. If you styled or scripted
+  `.post-panel` in a host app, that is the breaking change — no configuration,
+  route or database change is involved.
+- **The narrow-screen rules work again.** The `max-width: 760px` block sat above
+  the component rules it means to override, and CSS nesting adds no specificity,
+  so the desktop grid won every tie: showing one pane at a time on a phone had
+  quietly stopped working. The media query moved to the end of the file.
+- Smaller fixes that came with the shared core: a submit input is styled as a
+  button rather than a full-width field, the filter row keeps its search box and
+  button on one line, and a `code.key` truncates inside a list row instead of
+  wrapping over three lines.
+
 ## 0.2.0
 
 - **`config.admin_layout` now works on its own.** The dashboard's stylesheet and
@@ -35,8 +73,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
@@ -97,6 +133,7 @@
 - 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.1...HEAD
+[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

@@ -228,6 +228,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 +237,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 +306,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.
@@ -347,18 +365,6 @@ CI runs Rails 7.1 / 7.2 / 8.0 / 8.1 against Ruby 3.2 / 3.3 / 3.4.
 Bug reports and pull requests are welcome. The most useful report is a real
 Rails app and the exact point where installation or authoring felt confusing.
 
-## Also by the same author
-
-- [testimonials](https://github.com/yshmarov/testimonials) — testimonials,
-  video reviews, and NPS for Rails.
-- [livechat](https://github.com/yshmarov/livechat) — in-app support messaging
-  for Rails.
-- [ideasbugs](https://github.com/yshmarov/ideasbugs) — in-app bug reports and
-  feature requests.
-- [i18n_proofreading](https://github.com/yshmarov/i18n_proofreading) — in-context
-  translation proofreading.
-- [SupeRails](https://superails.com) — Rails screencasts.
-
 ## One family
 
 Five Rails engines built on the same backbone, so adopting a second one is
@@ -374,9 +380,9 @@ mostly muscle memory:
 
 They share the install shape (`generate <gem>:install`, mount, one initializer),
 the same host hooks (`base_controller_class` to inherit your admin's controller,
-`admin_layout` for just the shell), a dashboard stylesheet scoped so it
-cannot touch your own CSS, and migrations that follow your app's
-`primary_key_type`.
+`admin_layout` for just the shell), one dashboard design system — the same
+two-pane layout, colour tokens and components in all five, scoped so it cannot
+touch your own CSS — and migrations that follow your app's `primary_key_type`.
 
 ## License
 

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/app/views/product_tours/posts/_post_panel.html.erb

@@ -1,4 +1,4 @@
-<section class="post-panel">
+<section class="detail-panel">
   <div class="detail-scroll">
     <article class="card pad preview-card">
       <h2><%= post.title %></h2>

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

@@ -4,30 +4,46 @@
  *
  *   :root            custom properties, all `--pt-` prefixed so they can
  *                    neither overwrite a host's nor be overwritten by them.
- *   .pt-page          the page frame (was bare html/body). Only the gem's own
+ *   .pt-page         the page frame (was bare html/body). Only the gem's own
  *                    layout puts this class on <body>, so inside a host admin
  *                    these rules simply do not apply.
- *   .pt-dashboard     everything else, nested. Names like .container, .card
+ *   .pt-dashboard    everything else, nested. Names like .container, .card
  *                    and .tabs are confined to the dashboard's own markup, so
  *                    loading this file inside a host cannot restyle its chrome.
  *
  * Nothing here styles a bare `body`, `a`, `table` or `*` at the top level.
+ *
+ * Two sections follow: the design system shared by the whole gem family,
+ * then what only this gem has. A rule that belongs in the shared section
+ * belongs in all five copies of it.
+ *
+ * Order inside a section matters — components, then the page frame, then the
+ * narrow-screen overrides. Nesting adds no specificity, so the last rule
+ * wins the ties, and an override placed before the rule it means to beat
+ * silently does nothing.
  */
 
+/* ---------------------------------------------------------------------------
+ * SHARED CORE — identical in testimonials, ideasbugs, livechat, product_tours
+ * and i18n_proofreading apart from the prefix. Diff it against a sibling gem
+ * before you change it, and carry the change to all five.
+ * ------------------------------------------------------------------------- */
 
 :root {
   color-scheme: light dark;
   --pt-bg: #f6f7f9;
-  --pt-surface: #ffffff;
+  --pt-surface: #fff;
   --pt-text: #1c2024;
   --pt-muted: #6b7280;
   --pt-border: #e5e7eb;
   --pt-accent: #2563eb;
-  --pt-accent-text: #ffffff;
-  --pt-draft: #6b7280;
-  --pt-published: #16a34a;
-  --pt-danger: #dc2626;
+  --pt-accent-text: #fff;
   --pt-code: #f0f1f3;
+  /* The four semantic states every gem in the family badges something with. */
+  --pt-success: #16a34a;
+  --pt-warning: #d97706;
+  --pt-danger: #dc2626;
+  --pt-neutral: #6b7280;
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -38,38 +54,6 @@
     --pt-border: #2a313a;
     --pt-accent: #3b82f6;
     --pt-code: #232a33;
-}
-}
-@media (max-width: 760px) {
-  .pt-page { overflow-x: hidden; font-size: 14px; }
-  .pt-index { overflow-y: auto; overflow-x: hidden; }
-  .pt-index, .pt-index .container { min-height: 100vh; height: auto; }
-  .pt-index .container { padding-bottom: 10px; }
-  .pt-dashboard {
-  & .container { padding: 14px 10px 24px; }
-  & .page-head { align-items: center; }
-  & .page-head .button { min-height: 36px; }
-  & .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; }
   }
 }
 
@@ -83,58 +67,137 @@
   & a { color: var(--pt-accent); text-decoration: none; }
   & a:hover { text-decoration: underline; }
   & :focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }
+
+  /* Page furniture. `.container` is the reading width; an index page widens it
+     to 1280px in the page frame below. */
   & .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 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
   & .page-head h1 { margin: 0; }
+  & .lede { margin: 4px 0 0; color: var(--pt-muted); }
+  & .breadcrumb { margin: 0 0 12px; font-size: 13px; }
   & .muted { color: var(--pt-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(--pt-border); border-radius: 8px; background: var(--pt-surface); color: var(--pt-text); font: inherit; cursor: pointer; }
-  & button:hover,
-  & .button:hover { border-color: var(--pt-muted); text-decoration: none; }
-  & button.primary,
-  & .button.primary { border-color: var(--pt-accent); background: var(--pt-accent); color: var(--pt-accent-text); }
-  & button.danger,
-  & .button.danger { color: var(--pt-danger); }
-  & button.small,
-  & .button.small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
+  & .case-id { color: var(--pt-muted); font-weight: 400; font-size: 15px; }
+  & .spacer { flex: 1; }
+  & .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+  /* Section switcher: the pills above the dashboard when a gem has more than
+     one section. Lives on the page, so a host `admin_layout` can drop it. */
+  & .nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
+  & .nav a { padding: 6px 16px; border: 1px solid var(--pt-border); border-radius: 999px; background: var(--pt-surface); color: var(--pt-muted); font-weight: 600; }
+  & .nav a:hover { text-decoration: none; color: var(--pt-text); }
+  & .nav a.active { border-color: var(--pt-accent); background: var(--pt-accent); color: var(--pt-accent-text); }
+  & .nav a.active:hover { color: var(--pt-accent-text); }
+
+  /* Tabs: one system for the whole family — an underlined row of equal-width
+     tabs, sized to sit at the top of the sidebar. */
   & .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(--pt-muted); font-weight: 600; }
   & .tabs a:hover { background: var(--pt-bg); color: var(--pt-text); text-decoration: none; }
   & .tabs a.active { color: var(--pt-text); }
   & .tabs a.active::after { content: ""; position: absolute; right: 20px; bottom: 0; left: 20px; height: 2px; border-radius: 999px; background: var(--pt-accent); }
-  & .count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--pt-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(--pt-border); }
-  & .filters input[type="search"] { min-width: 0; }
+  & .count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--pt-muted) 14%, transparent); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
+  & .tabs a.active .count { background: var(--pt-border); }
+
+  /* Filter row under the tabs: a full-width select over a search + submit row,
+     however many of the three a gem actually has. */
+  & .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px; border-bottom: 1px solid var(--pt-border); }
+  & .filters label { flex: 1 1 100%; color: var(--pt-muted); font-size: 13px; }
+  & .filters select { flex: 1 1 100%; }
+  /* Basis 0, not auto: the controls below are `width: 100%`, which would
+     otherwise push the submit button onto its own row. */
+  & .filters input[type="search"] { flex: 1 1 0; min-width: 0; }
+  & .filters button,
+  & .filters input[type="submit"] { flex: 0 0 auto; }
+
+  /* Form controls. 16px so iOS does not zoom the page on focus. */
   & input,
   & select,
   & textarea { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--pt-border); border-radius: 8px; background: var(--pt-surface); color: var(--pt-text); font: inherit; font-size: 16px; letter-spacing: 0; }
   & textarea { resize: vertical; }
+  & input[type="checkbox"],
+  & input[type="radio"] { width: auto; min-width: 0; min-height: 0; }
   & input:focus,
   & select:focus,
   & textarea:focus { border-color: var(--pt-accent); outline: 2px solid color-mix(in srgb, var(--pt-accent) 22%, transparent); outline-offset: 0; }
+  & .field { margin-bottom: 16px; }
+  & .field label { display: block; margin-bottom: 5px; font-weight: 600; }
+  & .field small { display: block; margin-top: 5px; color: var(--pt-muted); }
+
+  /* A submit input is a button, whatever the markup says. */
+  & button,
+  & .button,
+  & input[type="submit"] { display: inline-flex; width: auto; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid var(--pt-border); border-radius: 8px; background: var(--pt-surface); color: var(--pt-text); font: inherit; cursor: pointer; }
+  & button:hover,
+  & .button:hover,
+  & input[type="submit"]:hover { border-color: var(--pt-muted); text-decoration: none; }
+  & button.primary,
+  & .button.primary,
+  & input[type="submit"].primary { border-color: var(--pt-accent); background: var(--pt-accent); color: var(--pt-accent-text); }
+  & button.danger,
+  & .button.danger { color: var(--pt-danger); }
+  & button.small,
+  & .button.small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
+  & .actions,
+  & .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+  & .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; }
-  & .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(--pt-draft); }
-  & .badge.status-published { background: var(--pt-published); }
+  & table { width: 100%; border-collapse: collapse; }
+  & th,
+  & td { padding: 10px 14px; text-align: left; vertical-align: top; }
+  & th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pt-muted); border-bottom: 1px solid var(--pt-border); }
+  & tr + tr td { border-top: 1px solid var(--pt-border); }
+  & td.row-actions { white-space: nowrap; text-align: right; }
+  & td.row-actions form { display: inline-block; }
+  & td.row-actions form + form { margin-left: 6px; }
+
+  & .badge { display: inline-flex; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
   & .badge.locale { border: 1px solid var(--pt-border); background: transparent; color: var(--pt-muted); }
   & code.key { max-width: 100%; padding: 2px 7px; border-radius: 6px; background: var(--pt-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(--pt-border); border-radius: 8px; background: var(--pt-surface); }
-  & .flash.notice { border-color: var(--pt-published); }
+  & .flash.notice { border-color: var(--pt-success); }
   & .flash.alert,
   & .errors { border-color: var(--pt-danger); }
   & .errors ul { margin-bottom: 0; }
+
+  & dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
+  & dt { color: var(--pt-muted); }
+  & dd { margin: 0; overflow-wrap: anywhere; }
+  & .message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+
   & .empty { padding: 48px 16px; color: var(--pt-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; }
-  & .dashboard-shell { display: grid; flex: 1 1 auto; grid-template-columns: minmax(330px, 410px) 1fr; gap: 16px; min-height: 0; }
+
+  /* The two-pane dashboard: the queue on the left, the selected record on the
+     right, each pane owning its own scroll. */
+  & .dashboard-shell { display: grid; flex: 1 1 auto; grid-template-columns: minmax(330px, 430px) 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(--pt-border); border-radius: 8px; background: var(--pt-surface); }
   & .dashboard-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; }
+  & .dashboard-sidebar .filters { flex: 0 0 auto; }
+
+  /* One row shape for every gem: a topline of badges and a timestamp, the copy
+     that identifies the record, then a muted line of ids and authors. */
   & .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(--pt-border); color: var(--pt-text); }
   & .record-row:hover { background: var(--pt-bg); text-decoration: none; }
@@ -142,50 +205,134 @@
   & .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(--pt-muted); }
-  & .pager { display: flex; flex: 0 0 auto; justify-content: space-between; min-height: 42px; padding: 10px 12px; border-top: 1px solid var(--pt-border); }
+  & .record-name,
+  & .record-copy,
+  & .record-meta span,
+  /* A key is `overflow-wrap: anywhere` in prose; in a row it truncates. */
+  & .record-topline code.key,
+  & .record-meta code.key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .record-name { font-weight: 600; }
+  & .record-copy { display: block; font-weight: 600; }
+  & .record-time { margin-left: auto; white-space: nowrap; }
+  & .record-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 1px; }
+  & .pager { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 16px; min-height: 42px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--pt-border); }
+
+  /* The selected record. `.detail-scroll` is the only part that scrolls, so the
+     panel heading and its actions stay put. */
   & .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-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; }
+  & .dashboard-detail .actions { margin-bottom: 0; }
+  & .detail-panel { display: flex; min-width: 0; flex-direction: column; }
+  /* The panel's own heading row: the title on the left, whatever acts on the
+     whole record on the right. */
+  & .panel-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
+  & .panel-head h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
   & .detail-scroll { display: flex; min-height: 0; flex-direction: column; gap: 12px; }
-  & .preview-card { width: 100%; }
+  & .mobile-back { display: none; }
+}
+
+/* Page frame — the gem's own layout only. After the components, so it wins the
+   specificity ties against them. */
+.pt-page { margin: 0; min-height: 100vh; background: var(--pt-bg); color: var(--pt-text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; }
+/* An index page is the dashboard: it fills the viewport and never scrolls
+   itself, because the queue and the detail pane each scroll on their own. */
+.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 .nav,
+.pt-index .page-head { flex: 0 0 auto; }
+/* Standalone show pages keep normal page scrolling. */
+.pt-show { min-height: 100vh; overflow: auto; }
+.pt-show .detail-panel { width: 100%; }
+.pt-show .detail-scroll { overflow: visible; }
+
+/* Narrow screens: one pane at a time, the queue until a record is picked.
+   Last in the file, so these overrides actually reach the rules above. */
+@media (max-width: 760px) {
+  .pt-page { font-size: 14px; }
+  .pt-index, .pt-show { overflow-x: hidden; }
+  .pt-index { overflow-y: auto; }
+  .pt-index, .pt-index .container { min-height: 100vh; height: auto; }
+  .pt-index .container { padding-bottom: 10px; }
+  .pt-dashboard {
+    & .container { padding: 14px 10px 24px; }
+    & .page-head { margin-bottom: 12px; }
+    & .detail-panel,
+    & .detail-scroll,
+    & .card,
+    & dl,
+    & dd { min-width: 0; max-width: 100%; }
+    & .dashboard-detail .card { width: 100%; }
+    & .message,
+    & .lede,
+    & dd,
+    & .muted { overflow-wrap: anywhere; }
+    & .dashboard-shell { display: block; min-height: calc(100vh - 62px); }
+    & .dashboard-sidebar,
+    & .dashboard-detail { min-height: calc(100vh - 62px); }
+    & .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 .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; }
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * GEM-SPECIFIC — product_tours only: the video preview, the tour authoring
+ * form with its action and video-source pickers, and the rich text editor.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --pt-draft: var(--pt-neutral);
+  --pt-published: var(--pt-success);
+}
+
+.pt-dashboard {
+  & .badge.status-draft { background: var(--pt-draft); }
+  & .badge.status-published { background: var(--pt-published); }
+  & .record-side { align-self: center; justify-content: center; color: var(--pt-muted); }
+
+  /* Preview: the tutorial as a reader meets it. */
+  & .preview-card,
+  & .details-card,
+  & .post-form { 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(--pt-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(--pt-muted); }
-  & dd { margin: 0; overflow-wrap: anywhere; }
+  & .preview-action { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
+  & .preview-back { margin-right: auto; color: var(--pt-muted); }
+  & .details-actions { margin-top: 16px; }
   & .refresh-button { margin-top: 14px; }
   & .metadata { max-width: 100%; overflow-x: auto; margin: 14px 0 0; padding: 12px; border-radius: 6px; background: var(--pt-code); font-size: 12px; }
+
   & .translation-list { border-top: 1px solid var(--pt-border); }
   & .translation-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pt-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; }
-  & .post-form { width: 100%; }
+
+  /* Authoring form. */
   & .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(--pt-muted); }
   & .section-intro { margin: -4px 0 12px; color: var(--pt-muted); }
-  & .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  & .form-video-preview { margin: 2px 0 16px; }
+  & .form-video-preview .video-preview { margin-bottom: 6px; }
+  & .form-video-preview > small { color: var(--pt-muted); }
+  & .checkbox { display: flex !important; align-items: center; gap: 8px; margin-top: 8px; font-weight: 400 !important; }
+  & .checkbox input { width: 18px; min-height: 18px; }
+  /* Radio cards: what the tour does, and where its video comes from. */
   & .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); }
@@ -198,14 +345,7 @@
   & .action-choice strong,
   & .action-choice small { display: block; }
   & .action-choice small { margin-top: 3px; color: var(--pt-muted); font-weight: 400; line-height: 1.35; }
-  & .preview-action { align-items: center; gap: 12px; }
-  & .preview-back { margin-right: auto; color: var(--pt-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(--pt-muted); }
+
   & .rich-editor { overflow: hidden; border: 1px solid var(--pt-border); border-radius: 8px; background: var(--pt-surface); }
   & .rich-toolbar { display: flex; gap: 4px; padding: 7px; border-bottom: 1px solid var(--pt-border); background: var(--pt-bg); }
   & .rich-toolbar button { width: 36px; height: 34px; min-height: 34px; padding: 0; border-color: transparent; background: transparent; font-weight: 600; }
@@ -213,15 +353,16 @@
   & .rich-content:focus { box-shadow: inset 0 0 0 2px var(--pt-accent); }
 }
 
-/* Page frame — the gem's own layout only. Last, so it wins the
-   specificity ties against the component layer above. */
-.pt-page { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; }
-.pt-page { margin: 0; min-height: 100vh; background: var(--pt-bg); color: var(--pt-text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
-.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; }
-.pt-show { min-height: 100vh; overflow: auto; }
-.pt-show .post-panel { width: 100%; }
-.pt-show .detail-scroll { overflow: visible; }
+/* New and edit are ordinary form pages: one column, narrower than a reading
+   page, normal scrolling. */
+.pt-form-page { min-height: 100vh; overflow: auto; }
 .pt-form-page .container { max-width: 820px; }
+
+@media (max-width: 760px) {
+  .pt-dashboard {
+    & .page-head .button { min-height: 36px; }
+    & .action-picker,
+    & .video-source-picker { grid-template-columns: 1fr; }
+    & .form-card { padding: 0; }
+  }
+}

data/lib/product_tours/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: product_tours
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.1
 platform: ruby
 authors:
 - Yaroslav Shmarov