Public story carousel — shared AIOHM component
Gap verified before implementation
The existing platform offers admin gallery selectors and video-beat editing, not a public ordered story carousel with per-video invitations and share links. This change adds one reusable Blade component and two dependency-free assets. Existing gallery, Muse Ambassador, and answer-intake backends are reused.
Usage
Render <x-public-story-carousel :stories="$stories" id="story-film" /> and load /css/public-story-carousel.css and /js/public-story-carousel.js once on that page. Every story supplies: id, short_title, title, eyebrow, description, question, invitation, action, duration_label, video, poster, answer_url, share_url. Use approved public media URLs and escaped server-side story data. Styling uses --psc-green, --psc-cream, and --psc-gold custom properties for branding.
The first chapter is selected unless a valid #story-{id} link selects another. Tabs support arrow/Home/End keys. Switching pauses other players. Videos do not autoplay. Actual ended events mark chapters watched for this visit only; no storage, analytics, points, follower changes, or forced locks are introduced. Shares use the individual story title, question, and supplied canonical URL. Animations respect reduced motion and the layout stacks on small screens.
A local aiohm:story-selected event carries the selected id/title/question for optional companion presentation. The existing Ask Muse widget can include its optional data-story-ref value in a submitted question. A hosting controller must resolve that id against its approved public catalog before adding any context. The native public controller on other sites ignores this optional field.
Integration and validation
AdiSaan's catalog and invitations remain in its theme configuration. Audience answers still use EchoSubmissionController and its existing consent/spam guards. No duplicate agent, chat service, carousel library, or publishing backend exists.
Public-site regression tests: 10 passed, 23 assertions. JavaScript syntax and ESLint checks passed. Browser checks verified first-video playback, watched completion, tab selection, chapter-specific answer prompt, deep-link selection, and 390px responsive layout with no horizontal page overflow.
Deploy the component, CSS and JS together. If a public host whitelists asset paths, add only these two exact paths. Load the existing Ask Muse script update and view cache-version change together if selected-story chat context is used. Other sites are not automatically redesigned; opt in by rendering the component.