trek 2.0.1 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 36520ed5aaf6b1c69a1b34ffc8d2bf89bf225c0548edbb62909edf18fa54c16a
-  data.tar.gz: '05296e71c1df00a73fe624ac48e5c0631f048480c643fe01a194c077405bed16'
+  metadata.gz: 76621e65ede62feb9ed4fd8aa029352bfbdda31c814a7e9679330597a631b2f6
+  data.tar.gz: a28bce934474a0d57069466281121658c75115eb9b9b1a3056eab9c6ee03ca5f
 SHA512:
-  metadata.gz: 796b4ecad9967d6d800ba0ffe37bd3b0e9eb51bbcbfe9d27c1c9e95a0ea6b7393561edf423dfdc2dcf16fda0402097bd83e9a30b2cacf3588133bdf66526502e
-  data.tar.gz: 791afe1a759ffe45012cd98c6d49bf766d72233b65d8b51106eb77a9bd11a1fb45f3fe2a7a2d4247ebf5209807d46094494b3745d94d282a3f811553aac6a05a
+  metadata.gz: 5653df741bf84cedce799a58c4f9d8c13d8a13226793f05d1f158b4971b0b08b1806463c82fa818526c8a0454d5b489f65cae207373c581bae074e1e3ae037bd
+  data.tar.gz: aad5fb5a6e0e9010c5b611ef2ba67e7ddf112d2b983c85684ce698d32083d1da82ac24469404f3377a131d3ef1be56ec369baa81bd9cd7e71b4560a916800e62

data/.prettierignore

@@ -0,0 +1,2 @@
+# esbuild output (gitignored), present locally after `yarn build`
+app/assets/builds/

data/.rubocop.yml

@@ -33,6 +33,17 @@ Style/StringLiteralsInInterpolation:
 Layout/LineLength:
   Max: 120
 
+# rubocop-rails-omakase disables both so it can indent methods under
+# `private`; we use the normal style (methods at the class-body level,
+# `private` included) and want `rubocop --autocorrect` to fix indentation,
+# generated files included.
+Layout/IndentationWidth:
+  Enabled: true
+
+Layout/IndentationConsistency:
+  Enabled: true
+  EnforcedStyle: normal
+
 Gemspec/RequiredRubyVersion:
   Enabled: false
 

data/AGENTS.md

@@ -21,11 +21,13 @@ bin/setup                 # bundle install + yarn install (dev setup)
 bin/console               # IRB with trek loaded
 rake                      # default: spec + rubocop
 rake spec                 # run tests (or: bundle exec rspec)
+make lint                 # all linters below
+make fix                  # rubocop/eslint/stylelint/prettier autocorrect
 make release              # bump version (version.rb + package.json), stamp CHANGELOG, tag, push gem + npm
 yarn docs:dev             # VitePress docs locally
 ```
 
-Linters (also run automatically via lefthook on pre-commit):
+Linters (`make lint`; also run automatically via lefthook on pre-commit):
 
 ```bash
 bundle exec rubocop
@@ -51,5 +53,6 @@ Security: `bundle exec brakeman` · `bundle exec bundle-audit check --update`
 - **Slim** linted via slim_lint; **JS/CSS** via ESLint + Stylelint + Prettier 2.8.8
 - **i18n**: keep English + French locales in sync (`config/locales/trek.*.yml`); DeepL auto-translation via `DEEPL_AUTH_KEY`
 - **Versioning**: version lives in both `lib/trek/version.rb` and `package.json` — keep in sync via `make release`
-- **CHANGELOG.md**: Keep-a-Changelog format. **Every MR must add an `[Unreleased]` entry.** When the change requires action in the host app on upgrade, add an "Upgrade note" describing what to do. When the change lets host apps remove or simplify existing patches or custom implementations, mention that too (e.g. "you can now drop your custom …").
+- **CHANGELOG.md**: Keep-a-Changelog format. **Every MR must add an `[Unreleased]` entry.** When the change requires action in the host app on upgrade, end the entry with a bold `**Upgrade note:**` label followed by what to do. Use the same label when the change lets host apps remove or simplify existing patches or custom implementations (e.g. "**Upgrade note:** you can now drop your custom …") — never as an unlabelled trailing sentence.
+- **Public code**: Trek ships publicly (gem, npm, docs), so nothing committed may mention a client or project name, nor a client's domain models or business logic — not in code, comments, specs, templates, docs, CHANGELOG or commit messages. Use neutral examples (`Page`, `Shop::Product`, an engine's `Blog::Post`). Client context belongs in GitLab issues and MR descriptions only.
 - **CI**: GitLab CI (`.gitlab-ci.yml`), stages build → lint → security → test → deploy; docs deploy to Netlify; deps via Renovate

data/CHANGELOG.md

@@ -1,5 +1,51 @@
 ## [Unreleased]
 
+## [2.2.0] - 2026-08-28
+
+### Added
+
+- `Trek::Dashboard::ChartComponent`, a dashboard card wrapping [Chartkick](https://chartkick.com) — pass `title`, `data`, a `type` (`:line_chart`, `:bar_chart`, …), optional `info`/`options`, and a `color` (default `:slate`); it renders `public_send(type, data, **options)` inside a coloured card matching the tiles. Chartkick is an **optional** dependency: the component only includes `Chartkick::Helper` when it is loaded, so Trek keeps working without it. `Trek::Dashboard::AnalyticsComponent` gained a `renders_many :charts` slot (alongside the existing `section`) so charts can be dropped straight into the dashboard with `a.with_chart(...)`. **Upgrade note:** to use `ChartComponent`, add `gem "chartkick"` to your app and `import "chartkick/chart.js"` in your admin JS bundle (Trek does not pull Chartkick in for you).
+- `Trek::Dashboard::TileComponent` gained a `title` option (a large heading above the text, coloured per the tile's `color`) and a `wide` option (default `false`) that spans two tile columns. Its `href` is now optional: without one the tile renders as a plain `div` instead of a link, for read-only stat tiles.
+- The layout gains a **stacked panel**: a second panel frame (`trek--layout-stacked-panel`) that opens on top of the primary one. The content editor's link/image/prompt inserters now open there, so an editor hosted _inside_ a panel (e.g. a Sectionable payload edited in a side panel) no longer loses its unsaved content when inserting a link — the primary panel stays put underneath and the inserted element lands back in the live editor. Closing the primary panel also closes the stacked one; _Annuler_ in the stacked panel closes only that one. The stacked panel is 1rem narrower than the primary panel (only while it stacks on an open one). **Upgrade note:** host apps that override the panel views (`app/views/<engine>/panels/{links,images,prompts}/*`) must retarget them to the `trek--layout-stacked-panel` frame and the `stackedPanelCloser` target, as Trek's own views now do.
+
+### Fixed
+
+- Internal links inserted through the content editor (stored as `gid://` URLs) rendered as literal `gid://…` hrefs — or were dropped by the sanitizer — in formatted content: `Prosemirror#format_content` now resolves GlobalIDs to page paths before rendering, and the editor's Link extension accepts the `gid` protocol so reopening such a link shows the linked page instead of an empty field.
+- `Trek::Form::ActionsComponent`: the sticky footer styling (sticky positioning, `--accent-1` background, `4rem` vertical padding) now only applies to the `default` aspect. It was set on the root rule, so the `seamless` aspect — used by `Trek::DialogComponent` — was also sticky and padded inside dialogs.
+
+## [2.1.0] - 2026-08-25
+
+### Added
+
+- Docs: a [Deploying to Scalingo](https://trek.etamin.studio/deploy) guide covering the trek-buildpack setup, the environment to configure, and how to migrate an app from the stock buildpacks.
+- `trek:install:prosopite` generator (wired into `trek:install`) sets up [Prosopite](https://github.com/charkost/prosopite) N+1 query detection (#211): adds `prosopite` and `pg_query` to the `development`/`test` Gemfile group and a `config/initializers/prosopite.rb` that mounts the Rack middleware — so every request is scanned, Trek's engine controllers included — raising `Prosopite::NPlusOneQueriesError` in test and logging in development. It also generates `spec/requests/admin/n_plus_one_spec.rb`, a smoke request spec rendering the dashboard, pages index and fragments index as an admin (extend it with the app's other admin routes). Documented under [Controllers › N+1 detection](https://trek.etamin.studio/reference/controllers#n-1-detection) with the `Prosopite.pause` escape hatch. **Upgrade note:** existing apps can run `rails g trek:install:prosopite`; apps that already wired Prosopite by hand can keep their setup (the generator skips the gems when `prosopite` is already in the Gemfile and won't overwrite an existing initializer).
+- `make lint` and `make fix` targets in Trek's own Makefile, mirroring the ones generated for host apps (RuboCop, slim-lint, ESLint, Stylelint, Prettier — the `fix` variant autocorrects all but slim-lint). A `.prettierignore` excludes the gitignored esbuild output in `app/assets/builds/`, which made the Prettier check fail on a local checkout that had run `yarn build`.
+- `Trek::MenuComponent` items accept an `active:` option for menu entries whose pages live under other controllers: a `String` is matched as a `controller_path` prefix, a `Regexp` against the whole path, and a boolean forces (or clears) the state — e.g. `s.with_item(text: …, href: [:admin, Shop], active: "admin/shop")` keeps _Shop_ highlighted while editing its products. Without it, the item stays active when its href matches the current controller, as before.
+- `content_editor` accepts an `autofocus:` option (default `false`): when true, the editor grabs focus on mount with the cursor at the end of the content — useful when the editor is the primary field of a side panel.
+
+### Changed
+
+- The shared `.rubocop.yml` (Trek's own, and the one `trek:install:rubocop` copies into host apps) re-enables `Layout/IndentationWidth` and `Layout/IndentationConsistency` with `EnforcedStyle: normal`. rubocop-rails-omakase disables both to allow its house style of indenting methods under `private`; Trek's style keeps methods at the class-body level, and a plain `rubocop --autocorrect` now fixes indentation — in generated files too. **Upgrade note:** copy the two cop blocks from the template (`rails g trek:install:rubocop` will prompt to overwrite) into your app's `.rubocop.yml`, then run `bundle exec rubocop --autocorrect` once; methods indented under `private` and mis-indented generated files get fixed.
+- `trek:install:scalingo` now targets the dedicated [trek-buildpack](https://github.com/etaminstudio/trek-buildpack) (#193) instead of the stock apt + ruby buildpack pair: it no longer generates `.buildpacks` (and removes an existing one) and prints the `env-set` commands to run (`BUILDPACK_URL` pinned to the buildpack's release tag, and the `DATABASE_URL=$SCALINGO_POSTGRESQL_URL` mapping). The buildpack pins Ruby/Node/Yarn from `.ruby-version`, the `.node-version` that `rails new` already generates, and `package.json`'s `packageManager`, runs `yarn install` once, and ships a slimmed image (~40% smaller, measured deploys down from ~3min to ~1min35) — see the buildpack README for details. **Upgrade note:** on each Scalingo app, set `BUILDPACK_URL=https://github.com/etaminstudio/trek-buildpack#v0.1.0`, delete `.buildpacks`, make sure `.node-version` exists (apps generated with `rails new -j esbuild` have it), and check that `config/database.yml` reads `DATABASE_URL` in production (mapped with `scalingo env-set 'DATABASE_URL=$SCALINGO_POSTGRESQL_URL'`).
+- `Trek::Form::FieldsetComponent`: the fieldset title (`.c-trek--form--fieldset-title`) now shares the form group label style (`--slate-12`, semibold, `1.2rem` bottom margin) so a titled fieldset reads like a labelled group; the `section` modifier only adds its larger font size on top. Hosts that restyled the plain fieldset title themselves can drop that override.
+- `trek:install:yarn` now installs **Yarn 4.18.0** (was 4.17.0). **Upgrade note:** existing apps can upgrade with `yarn set version 4.18.0` followed by `yarn install`.
+
+### Fixed
+
+- `trek:scaffold` now references the model top-level qualified (`::Shop::Product`) in the generated controller's `model` and in the `Admin::Dashboard::MODELS_IN_MENU` entry: once the scaffold creates the `Admin::Shop` namespace, a bare `Shop` under `module Admin` resolves to that module instead of the model — the scaffolded controller raised `NameError`, and previously generated code referencing a `Shop` model silently got the module. The generator also warns when a namespace segment matches an existing model file that `rails g model` would replace with a namespace module. (#201) **Upgrade note:** if a scaffold introduced a namespace named like an existing model, qualify that model as `::Shop` in the existing `Admin::…Controller#model` and `MODELS_IN_MENU` entries.
+- `Trek::Entries::ItemComponent`: the details list (`.c-trek--entries--item-details`) now wraps (`flex-wrap: wrap`) instead of overflowing or squeezing its items when an entry has many details or a narrow container.
+- `trek:install:postmark` is idempotent again: re-running it on an app where it had already run appended a second `config.action_mailer.delivery_method = :postmark` / `postmark_settings` block to `config/environments/production.rb` (the gem, credentials and mailer steps were already guarded). The config injection is now skipped when the file already sets `delivery_method = :postmark`. (#210)
+- Namespaced models (e.g. `Shop::Product`, routed under `namespace :shop`) now work out of the box with `Trek::ResourceController` (#212): `object_params` requires `model_name.param_key` (`shop_product`) instead of the demodulized element, so create/update no longer 400; `model_element_route` no longer prefixes the namespace when the route key already carries it (`shop_product`), so the delete button and list item links build `admin_shop_product_path` instead of the double-namespaced `admin_shop_shop_product_path` — models from isolated engines with relative naming (e.g. an engine's `Blog::Post`, route key `post`) keep the `[:blog, :post]` form; the controller defines `implicit_authorization_target` (`@object || model`) so `authorized(params)` and `Trek::Reorderable#reorder`'s bare `authorize!` find the policy; and `i18n_model_gender` reads `activerecord.models.<i18n_key>.gender` (`shop/product`), so `i18n_resource_label` picks the declared gender instead of the neutral fallback. **Upgrade note:** hosts that worked around this with a controller concern overriding `implicit_authorization_target`/`object_params`/`model_element_route`, or a prepend on `Trek::I18nHelper#i18n_model_gender`, can drop them.
+- `Trek::Form::GroupComponent` now styles `input[type="time"]` like `input[type="date"]` (field frame, 16rem max width, lighter picker colour); `time_field`s used to render as bare browser inputs.
+- Removed the dangling `sourceMappingURL` comment from the vendored `tom_select/css/tom-select.custom.css`: the referenced `.map` file is not shipped, so every host-app esbuild build (including `assets:precompile` on deploy) logged a `missing-source-map` debug warning. (#209)
+- `trek:scaffold` now re-indents the generated controller and policy: for a namespaced model the nested `module` wrappers were emitted without indenting the class body, tripping the host app's linters. The generator runs a targeted `rubocop --autocorrect --only Layout/IndentationWidth,Layout/IndentationConsistency` on both files (forced with `--only` since rubocop-rails-omakase leaves those cops disabled). (#199)
+- The `config/initializers/host.rb` generated by `trek:install:config` no longer references `ActionMailer::Base` during the initializer phase: doing so fires Action Mailer's load hook before the app's autoloader can resolve app classes, so an app configuring a custom `config.action_mailer.delivery_job` (e.g. `"MailDeliveryJob"`) crashed with a `NameError` on every production boot — breaking `assets:precompile` on deploy. The assignment is now deferred with `ActiveSupport.on_load(:action_mailer)`. (#208) **Upgrade note:** apply the same change to your app's `config/initializers/host.rb` — replace the `ActionMailer::Base.default_url_options = … if Rails.env.production?` line with the deferred block (see the generator template).
+- `trek:scaffold` now generates the right controller class for a namespaced model (e.g. `rails g trek:scaffold Shop::Product`): the template used the still-namespaced `controller_class_name` inside the per-namespace `module` wrappers, defining `Admin::Shop::Shop::ProductsController` while the generated route expected `Admin::Shop::ProductsController` — every request 404ed with an uninitialized constant. The class name is now demodulized, like the policy template already did. (#200)
+- The `show.html.slim` generated by `trek:scaffold` no longer ends with a trailing blank line: the attribute loop emitted its separator after every item instead of between items, so slim-lint failed in host apps with `TrailingBlankLines: Multiple empty lines in the end of file`. (#205)
+- `trek:upgrade:v2` now upgrades Yarn to 4.18.0 first (applying the 0.1.26 upgrade note: `yarn set version` + dropping the `interactive-tools` plugin) when the app still runs Yarn 3. Previously the generator wrote `npmPreapprovedPackages` — a Yarn 4-only setting — unconditionally, which under Yarn 3 is a hard error that breaks every yarn command, including the generator's own `yarn add` step.
+- Clarified the 0.1.26 changelog upgrade note about the Yarn minimal-age-gate exemption: it only applied to the pre-2.0.0 private GitLab distribution — since 2.0.0 the (Yarn 4-only) `npmPreapprovedPackages` entry, set up automatically by `trek:install` and `trek:upgrade:v2`, replaces it.
+- Fixed whitespace in `model.en.yml.tt` which caused prettier to fail.
+
 ## [2.0.1] - 2026-08-18
 
 ### Fixed
@@ -41,7 +87,7 @@
 ### Fixed
 
 - Added the missing French translations that fell back to English: `admin.dialog_component.{title,text}` (the confirmation dialog shown on every destroy action) and `admin.{pages,fragments}.{show.intro,reorder.success,search.alert}`. Also added the English `admin.section`/`admin.sections` flash messages that previously existed only in French. (#194)
-- `trek:install:yarn` now exempts the `@etaminstudio` scope from Yarn's minimal-age gate (`npmMinimalAgeGate: 0` under `npmScopes.etaminstudio` in the generated `.yarnrc.yml`), so a freshly published `@etaminstudio/trek` release installs without being quarantined; the gate still applies to public packages. **Upgrade note:** existing apps can add `npmMinimalAgeGate: 0` under `npmScopes.etaminstudio` in their `.yarnrc.yml`.
+- `trek:install:yarn` now exempts the `@etaminstudio` scope from Yarn's minimal-age gate (`npmMinimalAgeGate: 0` under `npmScopes.etaminstudio` in the generated `.yarnrc.yml`), so a freshly published `@etaminstudio/trek` release installs without being quarantined; the gate still applies to public packages. **Upgrade note:** existing apps can add `npmMinimalAgeGate: 0` under `npmScopes.etaminstudio` in their `.yarnrc.yml`. _(Only relevant to the private GitLab distribution used before 2.0.0: the `@etaminstudio` scope is retired since then, so this scope exemption does nothing for the public unscoped `trek` package. From 2.0.0 the equivalent is `trek` listed under `npmPreapprovedPackages` — a Yarn 4-only setting, hence the Yarn upgrade above — which `trek:install` generates and `trek:upgrade:v2` adds during migration, so no manual step is needed.)_
 - `trek:install:locales` no longer generates an invalid `config/initializers/locales.rb` (`I18n.available_locales = [:]` / `I18n.default_locale = :`) when passed no or blank locales. A blank option/env now falls back to the default (`en, fr`), blank entries are dropped, and the list can never end up empty. (#169)
 
 ## [0.1.25] - 2026-07-01

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    trek (2.0.1)
+    trek (2.2.0)
       action_policy (~> 0.6)
       actioncable
       acts_as_list (~> 1.1)

data/Makefile

@@ -1,5 +1,18 @@
 .PHONY: *
 
+lint:
+	bundle exec rubocop
+	bundle exec slim-lint "app/**/*.slim"
+	yarn eslint "app/**/*.js"
+	yarn stylelint "app/**/*.css"
+	yarn prettier --check "{app,config,lib,spec}/**/*.{css,js,json,md,yml}"
+
+fix:
+	bundle exec rubocop --autocorrect
+	yarn eslint "app/**/*.js" --fix
+	yarn stylelint "app/**/*.css" --fix
+	yarn prettier --write "{app,config,lib,spec}/**/*.{css,js,json,md,yml}"
+
 release:
 	@read -p "New version (current: $$(sed -n 's/.*VERSION = "\(.*\)"/\1/p' lib/trek/version.rb)): " version; \
 	if [ -z "$$version" ]; then echo "Version cannot be empty"; exit 1; fi; \

data/app/assets/icons/trek/audit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18a2 2 0 0 0-4 0"/><path d="m19 11-2.11-6.657a2 2 0 0 0-2.752-1.148l-1.276.61A2 2 0 0 1 12 4H8.5a2 2 0 0 0-1.925 1.456L5 11"/><path d="M2 11h20"/><circle cx="17" cy="18" r="3"/><circle cx="7" cy="18" r="3"/></svg>

data/app/assets/icons/trek/print.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>

data/app/components/trek/dashboard/analytics_component/analytics_component.html.slim

@@ -1,2 +1,4 @@
 div(class=root_class)
   div(class=class_for("info")) = section
+  - charts.each do |chart|
+    = chart

data/app/components/trek/dashboard/analytics_component.rb

@@ -3,5 +3,6 @@
 module Trek
   class Dashboard::AnalyticsComponent < Trek::Component
     renders_one :section, Trek::Dashboard::SectionComponent
+    renders_many :charts, Trek::Dashboard::ChartComponent
   end
 end

data/app/components/trek/dashboard/chart_component/chart_component.css

@@ -0,0 +1,192 @@
+.root {
+  border: 0.1rem solid;
+  border-radius: 0.8rem;
+  font-weight: var(--semibold);
+  margin-bottom: 2rem;
+  max-width: 83.7rem;
+  padding: 2rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.title {
+  color: var(--mint-12);
+  font-size: 1.6rem;
+  font-weight: var(--semibold);
+  margin: 0 0 0.5rem;
+}
+
+.data {
+  margin-bottom: 2rem;
+}
+
+.info {
+  color: var(--slate-11);
+  font-size: 1.4rem;
+  font-weight: var(--medium);
+  padding-bottom: 1.6rem;
+}
+
+.root.color-amber {
+  --icon-color: var(--amber-11);
+
+  background-color: var(--amber-2);
+  border-color: var(--amber-5);
+  color: var(--amber-12);
+}
+
+.root.color-amber:hover {
+  --icon-color: var(--amber-12);
+
+  background-color: var(--amber-3);
+  border-color: var(--amber-6);
+}
+
+.root.color-amber:active {
+  background-color: var(--amber-5);
+  border-color: var(--amber-7);
+}
+
+.root.color-lime {
+  --icon-color: var(--lime-11);
+
+  background-color: var(--lime-2);
+  border-color: var(--lime-5);
+  color: var(--lime-12);
+}
+
+.root.color-lime:hover {
+  --icon-color: var(--lime-12);
+
+  background-color: var(--lime-3);
+  border-color: var(--lime-6);
+}
+
+.root.color-lime:active {
+  background-color: var(--lime-5);
+  border-color: var(--lime-7);
+}
+
+.root.color-mint {
+  --icon-color: var(--mint-11);
+
+  background-color: var(--mint-2);
+  border-color: var(--mint-5);
+  color: var(--mint-12);
+}
+
+.root.color-mint:hover {
+  --icon-color: var(--mint-12);
+
+  background-color: var(--mint-3);
+  border-color: var(--mint-6);
+}
+
+.root.color-mint:active {
+  background-color: var(--mint-5);
+  border-color: var(--mint-7);
+}
+
+.root.color-purple {
+  --icon-color: var(--purple-11);
+
+  background-color: var(--purple-2);
+  border-color: var(--purple-5);
+  color: var(--purple-12);
+}
+
+.root.color-purple:hover {
+  --icon-color: var(--purple-12);
+
+  background-color: var(--purple-3);
+  border-color: var(--purple-6);
+}
+
+.root.color-purple:active {
+  background-color: var(--purple-5);
+  border-color: var(--purple-7);
+}
+
+.root.color-sky {
+  --icon-color: var(--sky-11);
+
+  background-color: var(--sky-2);
+  border-color: var(--sky-5);
+  color: var(--sky-12);
+}
+
+.root.color-sky:hover {
+  --icon-color: var(--sky-12);
+
+  background-color: var(--sky-3);
+  border-color: var(--sky-6);
+}
+
+.root.color-sky:active {
+  background-color: var(--sky-5);
+  border-color: var(--sky-7);
+}
+
+.root.color-slate {
+  --icon-color: var(--slate-11);
+
+  background-color: var(--slate-2);
+  border-color: var(--slate-5);
+  color: var(--slate-12);
+}
+
+.root.color-slate:hover {
+  --icon-color: var(--slate-12);
+
+  background-color: var(--slate-3);
+  border-color: var(--slate-6);
+}
+
+.root.color-slate:active {
+  background-color: var(--slate-5);
+  border-color: var(--slate-7);
+}
+
+.root.color-teal {
+  --icon-color: var(--teal-11);
+
+  background-color: var(--teal-2);
+  border-color: var(--teal-5);
+  color: var(--teal-12);
+}
+
+.root.color-teal:hover {
+  --icon-color: var(--teal-12);
+
+  background-color: var(--teal-3);
+  border-color: var(--teal-6);
+}
+
+.root.color-teal:active {
+  background-color: var(--teal-5);
+  border-color: var(--teal-7);
+}
+
+.root.color-violet {
+  --icon-color: var(--violet-11);
+
+  background-color: var(--violet-2);
+  border-color: var(--violet-5);
+  color: var(--violet-12);
+}
+
+.root.color-violet:hover {
+  --icon-color: var(--violet-12);
+
+  background-color: var(--violet-3);
+  border-color: var(--violet-6);
+}
+
+.root.color-violet:active {
+  background-color: var(--violet-5);
+  border-color: var(--violet-7);
+}

data/app/components/trek/dashboard/chart_component/chart_component.html.slim

@@ -0,0 +1,6 @@
+div(class=classes)
+  div(class=class_for("title")) = title
+  - if info.present?
+    span(class=class_for("info")) = info
+  div(class=class_for("data"))
+  = chart

data/app/components/trek/dashboard/chart_component/chart_component.js

@@ -0,0 +1 @@
+import "./chart_component.css";

data/app/components/trek/dashboard/chart_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Trek
+  class Dashboard::ChartComponent < Trek::Component
+    # Chartkick is an optional dependency: host apps that use this component must
+    # add `gem "chartkick"` and import "chartkick/chart.js" in their JS bundle.
+    include Chartkick::Helper if defined?(Chartkick)
+
+    option :title
+    option :info, optional: true
+    option :data
+    option :type
+    option :options, optional: true, default: proc { {} }
+    option :color, default: proc { :slate }
+
+    def chart
+      public_send(type, data, **options)
+    end
+
+    def classes
+      class_names(
+        root_class,
+        class_for("color-#{color}")
+      )
+    end
+  end
+end

data/app/components/trek/dashboard/tile_component/tile_component.css

@@ -20,6 +20,14 @@
   width: 20rem;
 }
 
+.root.wide {
+  width: calc(40rem + 1.2rem);
+}
+
+.title {
+  font-size: 3.6rem;
+}
+
 .root:hover .icon {
   transform: scale(1.125);
 }
@@ -58,6 +66,10 @@
   border-color: var(--amber-7);
 }
 
+.root.color-amber .title {
+  color: var(--amber-11);
+}
+
 .root.color-lime {
   --icon-color: var(--lime-11);
 
@@ -78,6 +90,10 @@
   border-color: var(--lime-7);
 }
 
+.root.color-lime .title {
+  color: var(--lime-11);
+}
+
 .root.color-mint {
   --icon-color: var(--mint-11);
 
@@ -98,6 +114,10 @@
   border-color: var(--mint-7);
 }
 
+.root.color-mint .title {
+  color: var(--mint-11);
+}
+
 .root.color-purple {
   --icon-color: var(--purple-11);
 
@@ -118,6 +138,10 @@
   border-color: var(--purple-7);
 }
 
+.root.color-purple .title {
+  color: var(--purple-11);
+}
+
 .root.color-sky {
   --icon-color: var(--sky-11);
 
@@ -138,6 +162,10 @@
   border-color: var(--sky-7);
 }
 
+.root.color-sky .title {
+  color: var(--sky-11);
+}
+
 .root.color-slate {
   --icon-color: var(--slate-11);
 
@@ -158,6 +186,10 @@
   border-color: var(--slate-7);
 }
 
+.root.color-slate .title {
+  color: var(--slate-11);
+}
+
 .root.color-teal {
   --icon-color: var(--teal-11);
 
@@ -178,6 +210,10 @@
   border-color: var(--teal-7);
 }
 
+.root.color-teal .title {
+  color: var(--teal-11);
+}
+
 .root.color-violet {
   --icon-color: var(--violet-11);
 
@@ -197,3 +233,7 @@
   background-color: var(--violet-5);
   border-color: var(--violet-7);
 }
+
+.root.color-violet .title {
+  color: var(--violet-11);
+}

data/app/components/trek/dashboard/tile_component/tile_component.html.slim

@@ -1,4 +1,14 @@
-= link_to href, class: classes, rel: rel, target: target
-  - if icon
-    = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
-  span(class=class_for("text")) = formatted_text
+- if href.present?
+  = link_to href, class: classes, rel: rel, target: target
+    - if title
+      span(class=class_for("title")) = title
+    - if icon
+      = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
+    span(class=class_for("text")) = formatted_text
+- else
+  div(class=classes)
+    - if title
+      span(class=class_for("title")) = title
+    - if icon
+      = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
+    span(class=class_for("text")) = formatted_text

data/app/components/trek/dashboard/tile_component.rb

@@ -3,12 +3,15 @@
 module Trek
   class Dashboard::TileComponent < Trek::Component
     option :color, default: proc { :slate }
-    option :href
+    option :href, optional: true
     option :icon, optional: true
     option :rel, optional: true
     option :target, optional: true
     option :text
+    option :title, optional: true
     option :allowed_to, default: -> { true }
+    # Spans two tile columns (including the gap between them).
+    option :wide, default: proc { false }
 
     def render?
       allowed_to
@@ -17,7 +20,8 @@ module Trek
     def classes
       class_names(
         root_class,
-        class_for("color-#{color}")
+        class_for("color-#{color}"),
+        class_for("wide") => wide
       )
     end
 

data/app/components/trek/entries/item_component/item_component.css

@@ -92,6 +92,7 @@ table .root {
 .details {
   color: var(--slate-9);
   display: flex;
+  flex-wrap: wrap;
   font-size: 1.3rem;
   line-height: 1.2;
   list-style: none;

data/app/components/trek/form/actions_component/actions_component.css

@@ -2,14 +2,8 @@
 
 .root {
   align-items: center;
-  background-color: var(--accent-1);
-  bottom: 0;
   display: flex;
   max-width: 120rem;
-  padding: 4rem 0;
-  position: sticky;
-  width: 100%;
-  z-index: 2;
 }
 
 .buttons {
@@ -36,9 +30,14 @@
 
 /* aspect */
 .root.aspect-default {
+  background-color: var(--accent-1);
   border-top: 1px solid var(--slate-6);
+  bottom: 0;
   margin-top: 3.2rem;
-  padding-top: 3.2rem;
+  padding: 3.2rem 0 4rem;
+  position: sticky;
+  width: 100%;
+  z-index: 2;
 }
 
 /* .root.aspect-seamless {

data/app/components/trek/form/content_editor_component/content_editor_component.html.slim

@@ -29,16 +29,14 @@ div(
         /   data-action=stimulus_action("toggleCode")
         / ) code
 
-        / slim-lint:disable ControlStatementSpacing
+        / The panel opening is handled by the hidden button's
+          openStackedPanelWhenLoaded action — a direct openPanel here would
+          pop the (possibly empty) primary panel alongside the stacked one.
         button.link(
           class=class_for("button")
           type="button"
-          data-action=[ \
-            stimulus_action("toggleLink"),
-            "trek--layout#openPanel",
-          ].join(" ")
+          data-action=stimulus_action("toggleLink")
         ) = render Trek::IconComponent.new("trek/link", title: t(".link"))
-        / slim-lint:enable ControlStatementSpacing
 
         = link_to "",
                   new_link_path,
@@ -46,8 +44,8 @@ div(
                   hidden: true,
                   data: stimulus_target_hash("hiddenLinkButton").merge( \
                     'base-path': new_link_path,
-                    action: "trek--layout#openPanelWhenLoaded",
-                    'turbo-frame': "trek--layout-panel",
+                    action: "trek--layout#openStackedPanelWhenLoaded",
+                    'turbo-frame': "trek--layout-stacked-panel",
                   )
 
         button(
@@ -239,8 +237,8 @@ div(
                 hidden: true,
                 data: stimulus_target_hash("hiddenPromptsButton").merge( \
                   'base-path': new_prompt_path,
-                  action: "trek--layout#openPanelWhenLoaded",
-                  'turbo-frame': "trek--layout-panel",
+                  action: "trek--layout#openStackedPanelWhenLoaded",
+                  'turbo-frame': "trek--layout-stacked-panel",
                 )
       = link_to "",
                 new_image_path,
@@ -248,6 +246,6 @@ div(
                 hidden: true,
                 data: stimulus_target_hash("hiddenImageButton").merge( \
                   'base-path': new_image_path,
-                  action: "trek--layout#openPanelWhenLoaded",
-                  'turbo-frame': "trek--layout-panel",
+                  action: "trek--layout#openStackedPanelWhenLoaded",
+                  'turbo-frame': "trek--layout-stacked-panel",
                 )