PHPackages spora-ai/spora-plugin-media-archive-frontend - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. spora-ai/spora-plugin-media-archive-frontend ActiveSpora-plugin-frontend spora-ai/spora-plugin-media-archive-frontend ============================================ Pre-built Vue SPA for browsing, filtering, and downloading Spora media-archive rows. Delivered as type `spora-plugin-frontend`; the host SPA lazy-loads it via /plugins/<parent-slug>/main.js (the parent plugin's `plugin.json#slug`, not this package's name). v0.1.7(3w ago)0208↓65%1MITTypeScriptPHP ^8.4.1CI passing Since Jul 10Pushed 2w agoCompare [ Source](https://github.com/spora-ai/spora-plugin-media-archive-frontend)[ Packagist](https://packagist.org/packages/spora-ai/spora-plugin-media-archive-frontend)[ RSS](/packages/spora-ai-spora-plugin-media-archive-frontend/feed)WikiDiscussions main Synced 1w ago READMEChangelog (7)DependenciesVersions (15)Used By (1) spora-plugin-media-archive-frontend =================================== [](#spora-plugin-media-archive-frontend) Pre-built Vue SPA for the Spora **Media Archive** admin panel. Delivered as a Composer package of type `spora-plugin-frontend`; `spora-installer`'s `SporaPluginFrontendInstaller` copies this repo's `frontend/` directory into `public/plugins/spora-plugin-media-archive-frontend/` so the host SPA can lazy-load it via `/plugins/spora-plugin-media-archive-frontend/main.js`. Why a separate repo from the PHP plugin? ---------------------------------------- [](#why-a-separate-repo-from-the-php-plugin) - The Vue bundle has its own release cadence (visual fixes don't need a PHP tag). - Backend-only operators can `composer require spora-ai/spora-plugin-media-archive` without pulling in npm-buildable assets. - The bundle is independently testable in isolation (Vitest + the smoke script). Detail-drawer affordances ------------------------- [](#detail-drawer-affordances) The detail drawer (right-side panel that opens when a card is selected) covers the operational lifecycle of a media asset: - Inline rename of the filename, tags, and prompt via accessible `` edit patterns (click-to-edit, Esc/Cancel reverts). - Public-share toggle, copy-URL, and token rotation — all routed through the host's typed API client (`hostContext.api`) so CSRF, base URL, and envelope unwrap are handled centrally. - Delete confirmation via a real `` element (replaces the old `window.confirm`) with a focus-trapped Cancel/Delete pair. - Lightbox preview for image and video assets with `aria-modal="true"`, save-and-restore focus on close, and `Escape` / click-outside dismissal. - Safe external source link: only `http(s)` schemes render as anchors; `javascript:` and other schemes show an "Invalid source URL" hint instead. - Live region (`role="status"` + `aria-live="polite"`) announces sharing state and toast notifications to assistive tech. - All edit-save buttons disable while a save is in flight so the user cannot double-submit a conflicting PATCH. Build ----- [](#build) ``` npm install npm run build # writes frontend/main.js + frontend/style.css npm run smoke # asserts window.SporaAppMediaArchive.mount is a function ``` The build output (`main.js` + `style.css`) is committed to this repo. Operators get the new bundle on the next `composer update`. Dev mode (plugin author) ------------------------ [](#dev-mode-plugin-author) ``` npm run dev # vite dev server on :5174 ``` The host SPA's `vite.config.ts` proxies `/plugins/spora-plugin-media-archive-frontend` to `:5174` so editing `src/*` updates the panel without rebuilding the host. See `docs.spora-ai.com/develop/plugins/authoring-frontend` for the dev workflow. Mount contract -------------- [](#mount-contract) The IIFE bundle installs `window.SporaAppMediaArchive` (the PascalCase of the slug) with two methods: - `mount(target: HTMLElement, hostContext)` — create the app, install local Pinia, mount into the host's slot. - `unmount(target: HTMLElement)` — tear down. The host's `apps/registry.ts` reads both. The bundle names **must** stay aligned with `media-archive` → `SporaAppMediaArchive` (see `vite.config.ts → build.lib.name`). License ------- [](#license) MIT — see [LICENSE](LICENSE). ### Health Score 45 — FairBetter than 91% of packages Maintenance96 Actively maintained with recent releases Popularity16 Limited adoption so far Community10 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~3 days Total 8 Last Release 26d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5be6ae8a46a938dbf3d35611aa2724446742020f0eeefdfa94333aa2d0ee40a2?d=identicon)[fabeat](/maintainers/fabeat) --- Top Contributors [![fabeat](https://avatars.githubusercontent.com/u/186884?v=4)](https://github.com/fabeat "fabeat (74 commits)") ### Embed Badge ![Health badge](/badges/spora-ai-spora-plugin-media-archive-frontend/health.svg) ``` [![Health](https://phpackages.com/badges/spora-ai-spora-plugin-media-archive-frontend/health.svg)](https://phpackages.com/packages/spora-ai-spora-plugin-media-archive-frontend) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)