Before and After Widget
Package docs status
Section titled “Package docs status”This page is generated from package source documentation in the Capell packages repository and the checked-in manifest. Source documentation is not distribution status. Before running a Composer command, verify that the exact package and compatible 1.x release are available through public Packagist or the authenticated marketplace account.
| Field | Value |
|---|---|
| Composer package | capell-app/widget-before-after |
| Package slug | widget-before-after |
| Product group | Capell Foundation |
| Tier | free |
| Bundle | foundation |
| Runtime contexts | admin, frontend |
| Capell version | ^1.0 |
| Source repository | capell-app/packages |
| Source path | packages/widget-before-after |
| Docs source | packages/widget-before-after/docs |
| Manifest | capell.json |
What This Plugin Adds
Section titled “What This Plugin Adds”Before and After Widget is an Available, No schema impact Capell package in the Capell Foundation product group. It ships as capell-app/widget-before-after and extends these surfaces: admin, frontend.
Before and After adds a Layout Builder widget for comparing two local images with a bounded range control. The public comparison supports keyboard and touch interaction with a non-interactive fallback.
Editors select the two images and comparison settings in Layout Builder, and visitors can move the public reveal control to inspect the difference.
Evidence: src/Filament/BeforeAfterWidget.php, resources/views/widget.blade.php, tests/Feature/WidgetBeforeAfterTest.php, capell.json.
Status details:
- Status: Available
- Tier: free
- Bundle: foundation
- Composer package:
capell-app/widget-before-after - Namespace:
Capell\WidgetBeforeAfter - Theme key: not applicable
Why It Matters
Section titled “Why It Matters”For developers: A typed widget definition keeps editor input, render data, and the Blade fallback behind one registered Layout Builder extension.
For teams: Teams can explain visual changes in one focused component without preparing separate image states or custom comparison code.
Evidence: src/Providers/WidgetBeforeAfterServiceProvider.php, src/Filament/BeforeAfterWidget.php, tests/Feature/WidgetBeforeAfterTest.php, resources/views/widget.blade.php.
Screens And Workflow
Section titled “Screens And Workflow”Screenshot contract: docs/screenshots.json.
- Before and After Widget extension card (marketplace, required).
- Before + After fields in Layout Builder (admin, optional).
- Before + After public output (frontend, optional).
Technical Shape
Section titled “Technical Shape”- Service providers:
Capell\WidgetBeforeAfter\Providers\WidgetBeforeAfterServiceProvider. - Filament classes:
BeforeAfterWidget. - Data objects:
BeforeAfterInputData,BeforeAfterRenderData. - Manifest contributions:
content-widget: Capell\WidgetBeforeAfter\WidgetBeforeAfterContribution. - Health checks:
Capell\WidgetBeforeAfter\Health\WidgetBeforeAfterHealthCheck. - Blade views:
packages/widget-before-after/resources/views/widget.blade.php. - Cache tags:
widget-before-after.
Data Model
Section titled “Data Model”This package has no schema impact. It extends Capell through content-widget contributions instead of declaring package-owned tables.
Install Impact
Section titled “Install Impact”- Required packages:
capell-app/admin,capell-app/core,capell-app/frontend,capell-app/layout-builder. - Admin navigation: no admin page or resource contribution is declared.
- Admin/editor extensions:
content-widget: WidgetBeforeAfterContribution. - Permissions: none declared in
capell.json. - Public routes: none declared.
- Database changes: no package migrations declared.
- Config: no package config files.
- Settings: no package settings declared.
- Queues or schedules: none declared.
- Cache tags:
widget-before-after. - Commands: none declared.
Common Pitfalls
Section titled “Common Pitfalls”- Keep required Capell packages on compatible v4 releases:
capell-app/admin,capell-app/core,capell-app/frontend,capell-app/layout-builder. - Keep public Blade and cached HTML free of authoring markers, model IDs, permissions, signed editor URLs, and lazy database queries.
- Custom write integrations must preserve invalidation for
widget-before-aftercache tags.
Troubleshooting
Section titled “Troubleshooting”| Symptom | Likely cause | Check | Fix |
|---|---|---|---|
| Package surface is missing after install | Provider or manifest is not loaded | Confirm capell.json, package composer.json, and provider registration | Reinstall the package, refresh Composer autoload, and clear host caches |
| Public output leaks unexpected state | Render data, cache variation, or authoring boundary has regressed | Check public Blade, cache tags, and public-output safety tests | Move data loading out of Blade and rerun the package public-output tests |
Quick Start
Section titled “Quick Start”- Install the package:
composer require capell-app/widget-before-after. - No package-specific setup command or migrations are declared.
- Open the package detail or install-intent surface and confirm the Before and After Widget extension card is present.
Next Steps
Section titled “Next Steps”- Package docs
- Overview
- Troubleshooting
- Screenshot contract
- Marketplace assets
- Capell content language plan
- Capell documentation design system
- Capell and package ERD notes
- Related packages: Layout Builder.
- Focused tests:
vendor/bin/pest packages/widget-before-after/tests --configuration=phpunit.xml.