@stacksjs/defaults 0.75.23 → 0.75.25

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 405 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 406 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, 405 components, and a multi-section layout.
+The Stacks admin dashboard provides a full-featured admin panel with 100+ route views, 406 components, and a multi-section layout.
 
 ## Key Paths
 - Dashboard components: `storage/framework/defaults/resources/components/Dashboard/`

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

@@ -132,6 +132,16 @@ supported web APIs provide fallback behavior outside a native host.
   between views of one screen, with selection haptics.
 - `<NativeSheet v-model:open="editing" title="…">` raises a bottom sheet for a
   task that belongs to the screen, above the tab bar.
+- `<NativeProgressRing :value="percent" :size="176">` fills a ring as something
+  completes (sets done, a countdown running out), with its content in the
+  slot. Colours follow `--native-ring` and `--native-ring-track`.
+- 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.
 
 `<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.23",
+  "version": "0.75.25",
   "description": "A modern Stacks development environment.",
   "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.23",
+  "version": "0.75.25",
   "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.27",
-    "@stacksjs/mobile": "^0.75.23",
+    "@stacksjs/mobile": "^0.75.25",
     "@stacksjs/sanitizer": "^0.2.113",
     "ts-qr-codes": "^0.1.8"
   }

package/resources/components/NativeAppShell.stx

@@ -132,6 +132,16 @@ const shellClass = derived(() => `${nativeMobile() ? 'native-mobile ' : ''}${cla
     z-index: 30;
   }
 
+  /* A screen that is a task of its own — a workout player, a composer —
+     marks itself with data-native-hide-tab-bar, and the tab bar steps away
+     while it is shown, as iOS does for a pushed screen that hides the bottom
+     bar. Its clearance goes with it. */
+  .native-app-shell:has([data-native-hide-tab-bar]) { --native-tab-bar-height: 0px; }
+  .native-app-shell:has([data-native-hide-tab-bar]) .native-app-tab-slot { display: none; }
+  .native-app-shell:has([data-native-hide-tab-bar]) .native-app-content {
+    padding-bottom: var(--native-safe-area-bottom);
+  }
+
   /* A phone app does not select its chrome on a long press, or flash it grey
      on a tap. Text inside the content is left selectable. */
   .native-app-shell.native-mobile .native-app-tab-slot,

package/resources/components/NativeComponents.test.ts

@@ -29,7 +29,7 @@ describe('Native components', () => {
   it('backs out through history, and sticks within the page rather than its wrapper', () => {
     const bar = read('NativeNavBar')
     expect(bar).toContain('if (goBack()) event.preventDefault()')
-    expect(bar).toContain('.native-nav { display: contents; }')
+    expect(bar).toContain('[data-stx-scope]:has(> .native-nav) { display: contents; }')
     expect(bar).toContain("useReactiveProp<string>('title', '')")
   })
 
@@ -50,4 +50,17 @@ describe('Native components', () => {
     expect(control).toContain('haptics.selection()')
     expect(control).toContain("emit('change', value)")
   })
+
+  it('steps the tab bar away for a screen that is a task of its own', () => {
+    const shell = read('NativeAppShell')
+    expect(shell).toContain('.native-app-shell:has([data-native-hide-tab-bar]) .native-app-tab-slot { display: none; }')
+    expect(shell).toContain('.native-app-shell:has([data-native-hide-tab-bar]) { --native-tab-bar-height: 0px; }')
+  })
+
+  it('fills a ring to its value, clamped, with its content in the middle', () => {
+    const ring = read('NativeProgressRing')
+    expect(ring).toContain('Math.max(0, Math.min(100, Number(value()) || 0))')
+    expect(ring).toContain('conic-gradient(var(--native-ring')
+    expect(ring).toContain('<slot />')
+  })
 })

package/resources/components/NativeNavBar.stx

@@ -38,8 +38,8 @@ function tapBack(event: MouseEvent): void {
 }
 </script>
 
-<!-- `display: contents` on the wrapper: a sticky element sticks within its
-     parent, and a wrapper exactly the bar's height would give it no room. -->
+<!-- `display: contents` on this box and on stx's own wrapper: a sticky element
+     sticks within its parent, and either box would give the bar no room. -->
 <div class="native-nav" data-native-nav-bar>
   <header :class="barClass()">
     <div class="native-nav-side">
@@ -63,7 +63,11 @@ function tapBack(event: MouseEvent): void {
 </div>
 
 <style>
-  .native-nav { display: contents; }
+  /* The element stx wraps each component in is a box too, as tall as the bar
+     and its title; the bar stuck inside it and scrolled away with the title.
+     Both boxes step aside so the bar sticks to the page. */
+  .native-nav,
+  [data-stx-scope]:has(> .native-nav) { display: contents; }
 
   .native-nav-bar {
     position: sticky;

package/resources/components/NativeProgressRing.stx

@@ -0,0 +1,48 @@
+<script client>
+/**
+ * A ring that fills as something completes: sets done, a countdown running
+ * out. Whatever goes inside it — a count, a time — is the slot.
+ *
+ * `value` is 0–100. Colours follow `--native-ring` and `--native-ring-track`,
+ * its thickness `--native-ring-width`.
+ */
+const value = useReactiveProp<number>('value', 0)
+const size = useReactiveProp<number>('size', 56)
+const label = useReactiveProp<string>('label', '')
+
+const ringStyle = derived(() => {
+  const percent = Math.max(0, Math.min(100, Number(value()) || 0))
+  const px = Math.max(16, Number(size()) || 56)
+  return `width:${px}px;height:${px}px;background:conic-gradient(var(--native-ring, rgb(16 185 129)) ${percent}%, var(--native-ring-track, rgb(148 163 184 / 0.22)) 0)`
+})
+</script>
+
+<div class="native-ring" role="img" :aria-label="label()" :style="ringStyle()" data-native-progress-ring>
+  <div class="native-ring-center">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .native-ring {
+    position: relative;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    transition: background 200ms linear;
+  }
+
+  .native-ring-center {
+    position: absolute;
+    inset: var(--native-ring-width, 5px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background: var(--native-ring-center, var(--native-safe-area-background, Canvas));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .native-ring { transition: none; }
+  }
+</style>

package/resources/components/Video.stx

@@ -44,17 +44,35 @@ 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>
 
 <figure class="m-0 {{ className }}">
   <video-player
+    ref="player"
     src="{{ src }}"
+    :src="liveSrc() || null"
+    :poster="livePoster() || null"
     data-media-config="{{ playerConfig }}"
     @if(poster) poster="{{ poster }}" @endif
     @if(controls) controls @endif
@@ -72,6 +90,9 @@ registerElements()
     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 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>
@@ -81,6 +102,7 @@ registerElements()
       @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>

package/resources/components/Video.test.ts

@@ -0,0 +1,28 @@
+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('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)')
+  })
+})

package/resources/components/index.ts

@@ -17,6 +17,7 @@ export { default as NativeHealthButton } from './NativeHealthButton.stx'
 export { default as NativeNavBar } from './NativeNavBar.stx'
 export { default as NativeNetworkBanner } from './NativeNetworkBanner.stx'
 export { default as NativePermissionButton } from './NativePermissionButton.stx'
+export { default as NativeProgressRing } from './NativeProgressRing.stx'
 export { default as NativePullToRefresh } from './NativePullToRefresh.stx'
 export { default as NativeSegmentedControl } from './NativeSegmentedControl.stx'
 export { default as NativeShareButton } from './NativeShareButton.stx'