@stacksjs/defaults 0.75.179 → 0.75.181

package/ai/skills/stacks-dashboard/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: stacks-dashboard
-description: Use when building or customizing the Stacks admin dashboard, including dashboard pages, model management views, analytics widgets, commerce dashboards, content management, settings panels, deployment monitoring, job/queue management, or the 414 built-in dashboard components. Covers the dashboard system at storage/framework/defaults/.
+description: Use when building or customizing the Stacks admin dashboard, including dashboard pages, model management views, analytics widgets, commerce dashboards, content management, settings panels, deployment monitoring, job/queue management, or the 413 built-in dashboard components. Covers the dashboard system at storage/framework/defaults/.
 license: MIT
 compatibility: Bun >= 1.3.0, TypeScript
 allowed-tools: Read Edit Write Bash Grep Glob
@@ -8,7 +8,7 @@ allowed-tools: Read Edit Write Bash Grep Glob
 
 # Stacks Dashboard
 
-The Stacks admin dashboard provides a full-featured admin panel with 100+ route views, 414 components, and a multi-section layout.
+The Stacks admin dashboard provides a full-featured admin panel with 100+ route views, 413 components, and a multi-section layout.
 
 ## Key Paths
 - Dashboard components: `storage/framework/defaults/resources/components/Dashboard/`

package/ai/skills/stacks-mobile/SKILL.md

@@ -346,7 +346,7 @@ simulator's Music app has nothing to play; launch a simulator build with
 
 ## Crash reporting (bughq)
 
-`crashReporting` in `config/mobile.ts` turns on Craft's native reporter (craft-native >= 0.0.176; the build refuses an older one). It sends crashes, hangs (MetricKit), ANRs and native crashes (ApplicationExitInfo) and uncaught JavaScript errors in native screens and the app script to bughq from an on-disk outbox, with app version and build, OS, device model, session and breadcrumbs (screens shown, failed requests).
+`crashReporting` in `config/mobile.ts` turns on Craft's native reporter (craft-native >= 0.0.179; the build refuses an older one). It sends crashes, hangs (MetricKit), ANRs and native crashes (ApplicationExitInfo) and uncaught JavaScript errors in native screens and the app script to bughq from an on-disk outbox, with app version and build, OS, device model, session and breadcrumbs (screens shown, failed requests).
 
 ```ts
 export default {
@@ -466,10 +466,12 @@ option the original metres heuristic remains for unlabelled inputs.
 - A screen that is a task of its own (a workout player, a composer) marks an
   element `data-native-hide-tab-bar`, and the tab bar steps away while it is
   shown, its reserved space with it.
-- `<Video :src="current.url">` is the framework's player (ts-video-player):
-  YouTube, Vimeo, HLS, DASH or a file. `src` is reactive, so one player in a
-  sheet can show whichever video is chosen; clearing it pauses the player.
-  Craft lets an https iframe load inside the app, so embeds play inline.
+- `<Video :src="current.url" autoplay>` is the player from
+  `@stacksjs/components` (ts-video-player): YouTube, Vimeo, HLS, DASH or a
+  file, with controls in the page's language. `src`, `poster`, `aspectRatio`
+  and `label` are reactive, so one player in a sheet can show whichever video
+  is chosen, `autoplay` starts each one, and clearing `src` pauses it. Craft
+  lets an https iframe load inside the app, so embeds play inline.
 
 `<NativeTabItem match="/m/workout">` keeps a tab lit on the detail screens
 opened from it. A tab bar is a `<nav>`, where a link is otherwise current only

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.179",
+  "version": "0.75.181",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.179",
+  "version": "0.75.181",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.179",
+    "@stacksjs/mobile": "0.75.181",
     "@stacksjs/sanitizer": "^0.2.483",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/index.ts

@@ -27,4 +27,3 @@ export { default as NativeSheet } from './NativeSheet.stx'
 export { default as NativeSymbol } from './NativeSymbol.stx'
 export { default as NativeTabBar } from './NativeTabBar.stx'
 export { default as NativeTabItem } from './NativeTabItem.stx'
-export { default as Video } from './Video.stx'

package/resources/components/Video.stx

@@ -1,132 +0,0 @@
-<script server>
-interface VideoSource { src: string, type?: string }
-interface VideoDrm {
-  widevine?: { url: string, headers?: Record<string, string> }
-  playready?: { url: string, headers?: Record<string, string> }
-  fairplay?: { url: string, certificateUrl: string, headers?: Record<string, string> }
-}
-interface VideoTrack { src: string, kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata', srclang?: string, label?: string, default?: boolean }
-interface VideoProps {
-  src: string
-  sources?: VideoSource[]
-  drm?: VideoDrm
-  tracks?: VideoTrack[]
-  poster?: string
-  title?: string
-  width?: number
-  height?: number
-  aspectRatio?: string
-  controls?: boolean
-  autoplay?: boolean
-  loop?: boolean
-  muted?: boolean
-  playsinline?: boolean
-  preload?: 'none' | 'metadata' | 'auto'
-  crossorigin?: 'anonymous' | 'use-credentials'
-  controlslist?: string
-  disablePictureInPicture?: boolean
-  class?: string
-}
-const props = defineProps<VideoProps>()
-const src = props.src || ''
-const sources = props.sources || []
-const tracks = props.tracks || []
-const title = props.title || 'Video player'
-const poster = props.poster || ''
-const width = props.width || ''
-const height = props.height || ''
-const ratio = props.aspectRatio || (width && height ? `${width} / ${height}` : '16 / 9')
-const controls = props.controls !== false
-const inline = props.playsinline !== false
-const preload = props.preload || 'metadata'
-const crossorigin = props.crossorigin || ''
-const controlslist = props.controlslist || 'nodownload'
-const className = props.class || ''
-const playerSources = (sources.length ? sources : src ? [{ src }] : []).map(source => props.drm && (source.type === 'application/dash+xml' || source.src.split(/[?#]/, 1)[0].toLowerCase().endsWith('.mpd')) ? { ...source, type: 'application/dash+xml', drm: props.drm } : source)
-const playerTracks = tracks.map(track => ({ ...track, language: track.srclang }))
-// A YouTube or Vimeo link is a web page, not a media file: the native <video>
-// fallback cannot play it, so without the player it offers the link instead.
-const isEmbed = /^https?:\/\/(?:[\w-]+\.)*(?:youtube\.com|youtube-nocookie\.com|youtu\.be|vimeo\.com)\//i.test(src)
-const playerConfig = JSON.stringify({ sources: playerSources, tracks: playerTracks, ...(props.drm ? { drm: props.drm } : {}) }).replaceAll('<', '\\u003c').replaceAll('>', '\\u003e').replaceAll('&', '\\u0026')
-</script>
-
-<script client>
-import { registerElements } from 'ts-video-player/elements'
-registerElements()
-
-// `src` and `poster` follow the parent, so one player can show whichever
-// video is chosen: `<Video :src="current.url" />` in a sheet. An empty `src`
-// pauses it, which is what closing that sheet should do.
-const liveSrc = useReactiveProp<string>('src', '')
-const livePoster = useReactiveProp<string>('poster', '')
-const element = useRef('player')
-
-effect(() => {
-  if (!liveSrc())
-    (element.current as { player?: { pause: () => void } } | null)?.player?.pause()
-})
-</script>
-
-{{-- No src attribute until there is a video: an empty one resolves to the
-     page's own URL, which the browser then downloads as the video. --}}
-<figure class="m-0 {{ className }}">
-  <video-player
-    ref="player"
-    @if(src) src="{{ src }}" @endif
-    :src="liveSrc() || null"
-    :poster="livePoster() || null"
-    data-media-config="{{ playerConfig }}"
-    @if(poster) poster="{{ poster }}" @endif
-    @if(controls) controls @endif
-    @if(props.autoplay) autoplay @endif
-    @if(props.loop) loop @endif
-    @if(props.muted) muted @endif
-    @if(inline) playsinline @endif
-    preload="{{ preload }}"
-    @if(crossorigin) crossorigin="{{ crossorigin }}" @endif
-    controlslist="{{ controlslist }}"
-    @if(props.disablePictureInPicture) disable-picture-in-picture @endif
-    keep-alive
-    aria-label="{{ title }}"
-    class="block overflow-hidden relative w-full bg-black ring-1 ring-black/10 rounded-2xl dark:ring-white/10 focus-within:ring-2 focus-within:ring-sky-500 shadow-sm group"
-    style="aspect-ratio: {{ ratio }};"
-  >
-    <media-error-display></media-error-display>
-    @if(isEmbed)
-      <a data-native-fallback href="{{ src }}" target="_blank" rel="noopener" class="flex items-center justify-center h-full w-full text-sm text-white underline">Watch {{ title }}</a>
-    @else
-    <video data-native-fallback @if(src) src="{{ src }}" @endif @if(poster) poster="{{ poster }}" @endif @if(width) width="{{ width }}" @endif @if(height) height="{{ height }}" @endif @if(controls) controls @endif @if(props.autoplay) autoplay @endif @if(props.loop) loop @endif @if(props.muted) muted @endif @if(inline) playsinline @endif preload="{{ preload }}" @if(crossorigin) crossorigin="{{ crossorigin }}" @endif controlslist="{{ controlslist }}" @if(props.disablePictureInPicture) disablepictureinpicture @endif aria-label="{{ title }}" class="object-contain h-full w-full">
-      @foreach (sources as source)
-        <source src="{{ source.src }}" @if(source.type) type="{{ source.type }}" @endif>
-      @endforeach
-      @foreach (tracks as track)
-        <track src="{{ track.src }}" kind="{{ track.kind }}" @if(track.srclang) srclang="{{ track.srclang }}" @endif @if(track.label) label="{{ track.label }}" @endif @if(track.default) default @endif>
-      @endforeach
-      Your browser does not support video playback.
-    </video>
-    @endif
-    <video-skin>
-      <media-seek-button slot="left" seconds="-10" aria-label="Back 10 seconds"></media-seek-button>
-      <media-play-button slot="left" aria-label="Play or pause"></media-play-button>
-      <media-seek-button slot="left" seconds="10" aria-label="Forward 10 seconds"></media-seek-button>
-      <media-live-button slot="left" aria-label="Go to live edge"></media-live-button>
-      <media-time-group slot="center" class="font-mono tabular-nums text-xs"></media-time-group>
-      <media-progress-bar slot="center" previews="metadata" aria-label="Video progress"></media-progress-bar>
-      <media-mute-button slot="right" aria-label="Mute or unmute"></media-mute-button>
-      <media-volume-slider slot="right" aria-label="Volume"></media-volume-slider>
-      <media-playback-rate-button slot="right" rates="0.5,0.75,1,1.25,1.5,2" aria-label="Playback speed"></media-playback-rate-button>
-      <media-settings-menu slot="right" aria-label="Video settings"></media-settings-menu>
-      <media-airplay-button slot="right" aria-label="Play on AirPlay"></media-airplay-button>
-      <media-remote-playback-button slot="right" aria-label="Play on another device"></media-remote-playback-button>
-      <media-pip-button slot="right" aria-label="Picture in Picture"></media-pip-button>
-      <media-fullscreen-button slot="right" aria-label="Fullscreen"></media-fullscreen-button>
-    </video-skin>
-  </video-player>
-  <figcaption class="sr-only">{{ title }}</figcaption>
-</figure>
-
-<style>
-video-player:not(:defined) video-skin { display: none; }
-video-player:defined > [data-native-fallback] { display: none; }
-@media (prefers-reduced-motion: reduce) { video-player, video-player * { transition-duration: 0.01ms !important; } }
-</style>

package/resources/components/Video.test.ts

@@ -1,36 +0,0 @@
-import { describe, expect, it } from 'bun:test'
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
-
-const video = readFileSync(join(import.meta.dir, 'Video.stx'), 'utf8')
-
-describe('Video', () => {
-  it('follows a reactive src and poster, so one player can show whichever video is chosen', () => {
-    expect(video).toContain(`useReactiveProp<string>('src', '')`)
-    expect(video).toContain(`:src="liveSrc() || null"`)
-    expect(video).toContain(`:poster="livePoster() || null"`)
-  })
-
-  it('renders no src attribute without a video, which would fetch the page itself', () => {
-    // An empty src resolves to the document's URL: the browser downloads the
-    // whole page as the video and fails, every time a player with nothing
-    // chosen yet renders.
-    expect(video).not.toMatch(/(?<!@if\(src\) )src="\{\{ src \}\}"/)
-    expect(video.match(/@if\(src\) src="\{\{ src \}\}" @endif/g)?.length).toBe(2)
-  })
-
-  it('pauses when its src is cleared, as closing a sheet does', () => {
-    expect(video).toContain(`useRef('player')`)
-    expect(video).toContain('ref="player"')
-    expect(video).toMatch(/if \(!liveSrc\(\)\)[\s\S]*?\.pause\(\)/)
-  })
-
-  it('never hands a YouTube or Vimeo page to the native <video> fallback', () => {
-    const isEmbed = new RegExp(video.match(/const isEmbed = \/(.+)\/i\.test/)![1]!, 'i')
-    for (const url of ['https://www.youtube.com/watch?v=aclHkVaku9U', 'https://youtu.be/aclHkVaku9U', 'https://m.youtube.com/shorts/aclHkVaku9U', 'https://vimeo.com/76979871'])
-      expect(isEmbed.test(url)).toBe(true)
-    for (const url of ['https://cdn.example.com/clip.mp4', '/media/demo/manifest.mpd', 'https://example.com/youtube.com/fake.mp4'])
-      expect(isEmbed.test(url)).toBe(false)
-    expect(video).toContain('@if(isEmbed)')
-  })
-})