@stacksjs/defaults 0.70.162 → 0.70.163

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.70.162",
+  "version": "0.70.163",
   "description": "Default Stacks scaffold resources (views, layouts, components, preloader) — shipped so apps consuming the framework from node_modules get the same fallback resources a vendored checkout provides. Source of truth: storage/framework/defaults.",
   "author": "Chris Breuer",
   "license": "MIT",

package/resources/components/Audio.stx

@@ -0,0 +1,92 @@
+<script server>
+interface AudioSource { src: string, type?: string }
+interface AudioDrm {
+  widevine?: { url: string, headers?: Record<string, string> }
+  playready?: { url: string, headers?: Record<string, string> }
+  fairplay?: { url: string, certificateUrl: string, headers?: Record<string, string> }
+}
+interface AudioTrack { src: string, kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata', srclang?: string, label?: string, default?: boolean }
+interface AudioProps {
+  src: string
+  sources?: AudioSource[]
+  drm?: AudioDrm
+  tracks?: AudioTrack[]
+  title?: string
+  artist?: string
+  artwork?: string
+  waveform?: string
+  controls?: boolean
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  preload?: 'none' | 'metadata' | 'auto'
+  crossorigin?: 'anonymous' | 'use-credentials'
+  class?: string
+}
+const props = defineProps<AudioProps>()
+const src = props.src || ''
+const sources = props.sources || []
+const tracks = props.tracks || []
+const title = props.title || 'Audio player'
+const artist = props.artist || ''
+const artwork = props.artwork || ''
+const waveform = props.waveform || ''
+const controls = props.controls !== false
+const preload = props.preload || 'metadata'
+const crossorigin = props.crossorigin || ''
+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 }))
+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()
+</script>
+
+<figure class="m-0 overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-stone-200 dark:bg-stone-950 dark:ring-stone-800 {{ className }}">
+  <div class="flex gap-4 items-center p-4 sm:p-5">
+    @if(artwork)
+      <img src="{{ artwork }}" alt="" width="72" height="72" loading="lazy" decoding="async" class="object-cover shrink-0 h-18 w-18 ring-1 ring-black/5 rounded-xl dark:ring-white/10">
+    @else
+      <div class="flex items-center justify-center shrink-0 h-18 w-18 text-stone-500 dark:text-stone-400 bg-stone-100 dark:bg-stone-900 rounded-xl" aria-hidden="true"><span class="h-7 w-7 i-hugeicons-music-note-01"></span></div>
+    @endif
+    <div class="flex-1 min-w-0">
+      <figcaption class="font-semibold text-sm text-stone-950 truncate dark:text-white">{{ title }}</figcaption>
+      @if(artist)<p class="mt-0.5 text-sm text-stone-500 truncate dark:text-stone-400">{{ artist }}</p>@endif
+      @if(waveform)<img src="{{ waveform }}" alt="" loading="lazy" decoding="async" class="object-cover mt-3 h-10 w-full opacity-70 dark:opacity-80">@endif
+    </div>
+  </div>
+  <div class="p-3 bg-stone-950 border-stone-100 border-t dark:border-stone-800">
+    <video-player src="{{ src }}" title="{{ title }}" data-media-config="{{ playerConfig }}" @if(controls) controls @endif @if(props.autoplay) autoplay @endif @if(props.loop) loop @endif @if(props.muted) muted @endif preload="{{ preload }}" @if(crossorigin) crossorigin="{{ crossorigin }}" keep-alive aria-label="{{ title }}" class="block overflow-hidden relative h-16 w-full text-white rounded-xl focus-within:ring-2 focus-within:ring-sky-500">
+      <media-error-display></media-error-display>
+      <audio data-native-fallback src="{{ src }}" @if(controls) controls @endif @if(props.autoplay) autoplay @endif @if(props.loop) loop @endif @if(props.muted) muted @endif preload="{{ preload }}" @if(crossorigin) crossorigin="{{ crossorigin }}" @endif aria-label="{{ title }}" class="block h-16 w-full accent-sky-500">
+        @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 audio playback.
+      </audio>
+      @if(controls)
+        <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-time-group slot="center" class="font-mono tabular-nums text-xs"></media-time-group>
+          <media-progress-bar slot="center" @if(waveform) waveform="{{ waveform }}" @endif aria-label="Audio 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="Audio 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>
+        </video-skin>
+      @endif
+    </video-player>
+  </div>
+</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/Image.stx

@@ -0,0 +1,59 @@
+<script server>
+interface ImageSource { type: string, srcset: string, media?: string }
+interface ImageProps {
+  src: string
+  alt: string
+  width?: number
+  height?: number
+  aspectRatio?: string
+  srcset?: string
+  sizes?: string
+  sources?: ImageSource[]
+  loading?: 'lazy' | 'eager'
+  decoding?: 'async' | 'sync' | 'auto'
+  fetchpriority?: 'high' | 'low' | 'auto'
+  priority?: boolean
+  decorative?: boolean
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+  position?: string
+  placeholder?: string
+  class?: string
+}
+const props = defineProps<ImageProps>()
+if (!props.decorative && !props.alt?.trim()) throw new TypeError('Image alt text is required unless decorative is true')
+const src = props.src || ''
+const alt = props.decorative ? '' : props.alt || ''
+const width = props.width || ''
+const height = props.height || ''
+const ratio = props.aspectRatio || (width && height ? `${width} / ${height}` : '')
+const srcset = props.srcset || ''
+const sizes = props.sizes || (srcset ? '100vw' : '')
+const sources = props.sources || []
+const loading = props.priority ? 'eager' : props.loading || 'lazy'
+const decoding = props.decoding || 'async'
+const priority = props.priority ? 'high' : props.fetchpriority || 'auto'
+const fit = props.fit || 'cover'
+const position = props.position || 'center'
+const placeholder = props.placeholder || ''
+const className = props.class || ''
+</script>
+
+<picture class="relative block overflow-hidden bg-stone-100 dark:bg-stone-900 {{ className }}" @if(ratio) style="aspect-ratio: {{ ratio }};" @endif>
+  @foreach (sources as source)
+    <source type="{{ source.type }}" srcset="{{ source.srcset }}" @if(source.media) media="{{ source.media }}" @endif @if(sizes) sizes="{{ sizes }}" @endif>
+  @endforeach
+  <img
+    src="{{ src }}"
+    alt="{{ alt }}"
+    @if(width) width="{{ width }}" @endif
+    @if(height) height="{{ height }}" @endif
+    @if(srcset) srcset="{{ srcset }}" @endif
+    @if(sizes) sizes="{{ sizes }}" @endif
+    loading="{{ loading }}"
+    decoding="{{ decoding }}"
+    fetchpriority="{{ priority }}"
+    @if(props.decorative) aria-hidden="true" @endif
+    class="h-full w-full"
+    style="object-fit: {{ fit }}; object-position: {{ position }}; @if(placeholder) background: {{ placeholder }} center / cover no-repeat; @endif"
+  >
+</picture>

package/resources/components/Video.stx

@@ -0,0 +1,108 @@
+<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 }))
+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()
+</script>
+
+<figure class="m-0 {{ className }}">
+  <video-player
+    src="{{ src }}"
+    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>
+    <video data-native-fallback src="{{ src }}" @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>
+    <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/index.ts

@@ -11,3 +11,6 @@ export { default as SidebarModern } from './Dashboard/SidebarModern.stx'
 
 // Dashboard and UI components
 export * from './Dashboard'
+export { default as Audio } from './Audio.stx'
+export { default as Image } from './Image.stx'
+export { default as Video } from './Video.stx'