@stacksjs/defaults 0.75.24 → 0.75.26

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

@@ -113,6 +113,11 @@ await withNativeFeedback(() => saveActivity())
 The runtime is browser-safe. Craft-backed operations use the native bridge;
 supported web APIs provide fallback behavior outside a native host.
 
+For a run or ride, `createRouteRecorder({ location, onUpdate })` starts, pauses,
+resumes and stops the native recording, re-attaches to one that outlived the
+app (`attach()`), and reports live distance and pace from `routeStats(fixes)`,
+which ignores GPS drift, inaccurate fixes and the ground crossed during a pause.
+
 ## STX components
 
 - `<NativeAppShell>` applies iOS safe-area insets and reserves tab-bar space.
@@ -132,6 +137,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/ai/skills/stacks-router/SKILL.md

@@ -32,6 +32,28 @@ route.options('/users', handler)
 route.health()  // GET /health endpoint
 ```
 
+### Zero-allocation static responses
+
+Use `staticResponse()` only when the response is final at registration time and
+must bypass the request pipeline entirely:
+
+```typescript
+route.staticResponse('GET', '/ready', new Response('{"ready":true}', {
+  headers: { 'content-type': 'application/json' },
+}))
+```
+
+Bun serves that `Response` directly from its native route table. No handler,
+middleware, request ID, CSRF check or cookie, rate limit, request context,
+security or CORS header mutation, compression, or response formatting runs.
+Supply the final status, headers, and body bytes yourself.
+
+Static responses return the router, not a chainable route, so `.middleware()`,
+`.name()`, `.skipCsrf()`, `.requireCsrf()`, and `.rateLimit()` cannot be attached
+and silently bypassed. A static response inside a group with middleware or
+`apiResponse: true` throws during registration. Prefix-only groups are valid.
+Duplicate method and path registrations keep the first response.
+
 ### Chainable Methods
 ```typescript
 route.get('/admin', handler)

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.24",
+  "version": "0.75.26",
   "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.24",
+  "version": "0.75.26",
   "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.24",
+    "@stacksjs/mobile": "^0.75.26",
     "@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

@@ -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/NativeNetworkBanner.stx

@@ -1,22 +1,43 @@
 <script client>
-import { network } from '@stacksjs/mobile'
+import { lifecycle, network, whenNativeMobile } from '@stacksjs/mobile'
 import { onDestroy, onMount } from 'stx'
 
 const className = useReactiveProp<string>('class', '')
 const offlineLabel = useReactiveProp<string>('offlineLabel', 'You are offline. Changes will sync automatically.')
 const connected = state(true)
 let removeListener: (() => void) | null = null
+let removeLifecycle: (() => void) | null = null
 
 function applyStatus(status: { isConnected: boolean }): void {
   connected.set(status.isConnected)
 }
 
+// Asking can fail (the bridge not ready yet at launch, a request that timed
+// out): that is no answer, not "offline". Treating it as offline stuck the
+// banner on screen while everything was loading fine.
+function refresh(): void {
+  void network.getStatus().then(applyStatus).catch(() => {})
+}
+
 onMount(() => {
-  void network.getStatus().then(applyStatus).catch(() => connected.set(false))
+  refresh()
   removeListener = network.onChange(applyStatus)
+  // Once the native host is there, ask it; and again whenever the app comes
+  // back to the front, where a change may have gone by unseen.
+  void whenNativeMobile().then(native => native && refresh())
+  removeLifecycle = lifecycle.onStateChange((appState) => {
+    if (appState === 'active') refresh()
+  })
 })
 
-onDestroy(() => removeListener?.())
+// The webview's own view, for the moments the host has not spoken yet.
+useEventListener('online', () => connected.set(true))
+useEventListener('offline', () => refresh())
+
+onDestroy(() => {
+  removeListener?.()
+  removeLifecycle?.()
+})
 </script>
 
 <!--

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'