@hina-ui/vue 1.7.10 → 1.7.11

package/dist/shared/behavior/spoiler/painter.ts

@@ -32,26 +32,50 @@ const DEFAULTS = {
   accent: '0 0% 20%',
 } as const
 
+export const SPOILER_WORKLET_INPUTS = [
+  '--hn-nz-t',
+  '--hn-nz-stop',
+  '--hn-nz-fade',
+  '--hn-nz-gap',
+  '--hn-nz-accent',
+  '--hn-nz-words',
+  '--hn-nz-density',
+] as const
+
 const BLOCK_MAX_TILE = 293
 const INLINE_MAX_TILE = 333
 const GAP_RATIO = 8
 const DEFAULT_FADE_S = 1.5
+const CLOCK_S = 3600
+
+const painters = new WeakMap<Element, SpoilerPainter>()
+let viewport: IntersectionObserver | undefined
+
+function watchViewport() {
+  viewport ??= new IntersectionObserver(entries => {
+    for (const entry of entries) painters.get(entry.target)?.setInView(entry.isIntersecting)
+  })
+  return viewport
+}
 
 export class SpoilerPainter {
   readonly el: HTMLElement
   maxFPS: number = DEFAULTS.fps
 
-  private t = 0
-  private t0 = 0
-  private tstop: number | null = null
-  private raf: number | null = null
-  private fadeS = 0
+  private clock: Animation | null = null
+  private settle: ReturnType<typeof setTimeout> | undefined
+  private running = false
+  private inView = false
   private hidden = false
   private destroyed = false
 
   constructor(el: HTMLElement, options: SpoilerPainterOptions = {}) {
     registerSpoilerWorklet()
     this.el = el
+    painters.set(el, this)
+    watchViewport().observe(el)
+    this.setFade(0)
+    this.setTstop(null)
     this.update(options)
   }
 
@@ -68,13 +92,19 @@ export class SpoilerPainter {
   }: SpoilerPainterOptions = {}) {
     if (this.destroyed) return
 
-    this.maxFPS = prefersReducedMotion() ? 0 : fps
+    const maxFPS = prefersReducedMotion() ? 0 : fps
+    if (maxFPS !== this.maxFPS) {
+      this.maxFPS = maxFPS
+      if (maxFPS > 0) this.clock?.effect?.updateTiming({ easing: this.easing() })
+      else this.stopClock()
+    }
 
     this.el.style.setProperty('--hn-nz-density', String(density))
     this.el.style.setProperty('--hn-nz-accent', accent)
 
     const isBlockElement = getComputedStyle(this.el).getPropertyValue('display') !== 'inline'
     this.useBackgroundStyle('auto', 'auto', false)
+    this.el.style.setProperty('--hn-nz-gap', '0px 0px')
 
     if (isBlockElement) {
       this.el.style.setProperty('--hn-nz-words', 'false')
@@ -109,23 +139,21 @@ export class SpoilerPainter {
     this.el.style.background = `paint(hn-spoiler) ${repeatAndPosition} / ${w} ${h}`
   }
 
-  private setFade(value: number) {
-    this.fadeS = value
-    this.el.style.setProperty('--hn-nz-fade', `${value}s`)
+  private easing() {
+    return `steps(${Math.round(CLOCK_S * this.maxFPS)})`
   }
 
-  private setT(value: number) {
-    this.t = value
-    this.el.style.setProperty('--hn-nz-t', value.toFixed(3))
+  private time() {
+    const elapsed = Number(this.clock?.currentTime ?? 0) / 1000
+    return this.maxFPS > 0 ? Math.floor(elapsed * this.maxFPS) / this.maxFPS : 0
+  }
+
+  private setFade(value: number) {
+    this.el.style.setProperty('--hn-nz-fade', `${value}s`)
   }
 
   private setTstop(value: number | null) {
-    this.tstop = value
-    if (value !== null) {
-      this.el.style.setProperty('--hn-nz-stop', value.toFixed(3))
-    } else {
-      this.el.style.removeProperty('--hn-nz-stop')
-    }
+    this.el.style.setProperty('--hn-nz-stop', value === null ? 'Infinity' : value.toFixed(3))
   }
 
   private parseFade(value: number | boolean | undefined) {
@@ -133,13 +161,40 @@ export class SpoilerPainter {
     return value === true || value === undefined ? DEFAULT_FADE_S : Number(value)
   }
 
+  private sync() {
+    if (!this.clock) return
+    if (this.running && this.inView) this.clock.play()
+    else this.clock.pause()
+  }
+
+  private stopClock() {
+    clearTimeout(this.settle)
+    this.settle = undefined
+    this.clock?.cancel()
+    this.clock = null
+    this.running = false
+  }
+
+  setInView(value: boolean) {
+    if (this.destroyed || value === this.inView) return
+    this.inView = value
+    this.sync()
+  }
+
   hide(animate?: number | boolean) {
     if (this.destroyed) return
     this.hidden = true
     this.setFade(this.parseFade(animate))
     this.setTstop(null)
-    this.setT(0)
-    this.startAnimation()
+    this.stopClock()
+    if (this.maxFPS <= 0) return
+    this.clock = this.el.animate({ '--hn-nz-t': [0, CLOCK_S] } as PropertyIndexedKeyframes, {
+      duration: CLOCK_S * 1000,
+      easing: this.easing(),
+      iterations: Infinity,
+    })
+    this.running = true
+    this.sync()
   }
 
   reveal(animate?: number | boolean) {
@@ -147,51 +202,23 @@ export class SpoilerPainter {
     this.hidden = false
     const duration = this.parseFade(animate)
     this.setFade(duration)
-    this.setTstop(this.t)
-    if (duration <= 0) this.stopAnimation()
-  }
-
-  private frame = (now: DOMHighResTimeStamp) => {
-    if (this.destroyed) return
-    const shouldStop = this.tstop !== null && this.t > this.tstop + this.fadeS
-
-    if (this.maxFPS > 0 && !shouldStop) {
-      this.raf = requestAnimationFrame(this.frame)
-    }
-
-    const dt = now - this.t0
-    if (dt > 0 && dt < 1000 / this.maxFPS) return
-
-    this.setT(this.t + dt / 1000)
-    this.t0 = now
-  }
-
-  private startAnimation() {
-    this.t0 = performance.now()
-    this.frame(this.t0)
-  }
-
-  private stopAnimation() {
-    if (this.raf !== null) {
-      cancelAnimationFrame(this.raf)
-      this.raf = null
+    this.setTstop(this.time())
+    clearTimeout(this.settle)
+    const stop = () => {
+      this.settle = undefined
+      this.running = false
+      this.sync()
     }
+    if (duration <= 0) stop()
+    else this.settle = setTimeout(stop, duration * 1000 + 1000 / this.maxFPS)
   }
 
   destroy() {
     this.destroyed = true
-    this.stopAnimation()
+    this.stopClock()
+    viewport?.unobserve(this.el)
+    painters.delete(this.el)
     this.el.style.removeProperty('background')
-    for (const prop of [
-      '--hn-nz-t',
-      '--hn-nz-stop',
-      '--hn-nz-fade',
-      '--hn-nz-gap',
-      '--hn-nz-words',
-      '--hn-nz-density',
-      '--hn-nz-accent',
-    ]) {
-      this.el.style.removeProperty(prop)
-    }
+    for (const prop of SPOILER_WORKLET_INPUTS) this.el.style.removeProperty(prop)
   }
 }

package/dist/shared/behavior/spoiler/worklet.ts

@@ -11,10 +11,6 @@ const workletMain = () => {
         0x7fffffff
 
   const pol2vec = (l: number, a = 0) => [l * M.cos(a), l * M.sin(a)] as const
-  const vecmag = ([x, y]: readonly number[]) => M.sqrt(x! * x! + y! * y!)
-  const vecnorm = ([x, y]: readonly number[], l = vecmag([x!, y!])) =>
-    l === 0 ? ([0, 0] as const) : ([x! / l, y! / l] as const)
-
   const trapezoidalWave = (l: number, a: number, b: number) => {
     const s = M.max(a, l - b)
     return (t: number) => {
@@ -144,20 +140,21 @@ const workletMain = () => {
 
       ctx.clearRect(0, 0, size.width, size.height)
 
+      const l = parseInt(accent[2] ?? '0')
+      const ldir = l > 50 ? -1 : 1
+      const hue = `hsl(${accent[0]} ${accent[1]} `
+
       for (let i = 0; i < world.n; ++i) {
         const x0 = hgap + wordDist(rand())
         const y0 = rand(vgap, height - vgap)
         const v0mag = rand(vmin, vmax)
         const size0 = rand(1, 1 + sizedev)
 
-        const l = parseInt(accent[2] ?? '0')
-        const ldir = l > 50 ? -1 : 1
         const lightness = M.floor(clamp(0, l + ldir * rand(0, 30), 100))
 
         const v0 = pol2vec(v0mag, rand(0, M.PI * 2))
         const vx0 = v0[0]
         const vy0 = v0[1]
-        vecnorm(v0)
 
         const shape = rand() > 0.5 ? 'square' : 'circle'
         const lifetime = rand(0.3, 1.5)
@@ -175,12 +172,13 @@ const workletMain = () => {
         const y = y0 + vy0 * t
 
         const fade = animateFadeInOut(world, i, fadeDuration)
-        const alpha = fade * (1 - t / lifetime)
+        const alpha = M.round(fade * (1 - t / lifetime) * 100)
         const psize = fade * (size0 * visibilityFn(t))
+        if (alpha <= 0 || psize <= 0) continue
 
+        ctx.fillStyle = `${hue}${lightness}% / ${alpha}%)`
         for (const [wx, wy] of cycleBounds([x, y], [width, height], psize / 2)) {
           ctx.beginPath()
-          ctx.fillStyle = `hsl(${accent[0]} ${accent[1]} ${lightness}% / ${M.round(alpha * 100)}%)`
           if (shape === 'square') {
             ctx.rect(wx!, wy!, psize, psize)
           } else {

package/dist/shared/styles/motion.css

@@ -510,8 +510,14 @@
   }
 }
 
+@layer components {
+  .hn-anim-collapse {
+    display: flow-root;
+  }
+}
+
 @utility hn-anim-collapse {
-  overflow: hidden;
+  overflow: clip;
   &[data-state='open'] {
     animation: hn-collapse-in var(--hn-duration-base) var(--hn-ease-move);
   }

package/dist/shared/styles/spoiler.css

@@ -1,3 +1,9 @@
+@property --hn-nz-t {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
 @property --hn-iris-len {
   syntax: '<percentage>';
   inherits: false;

package/dist/shared/styles/typography.css

@@ -6,10 +6,25 @@
   letter-spacing: var(--hn-tracking-tight);
 }
 
+@layer base {
+  :where(
+    .text-accent-on,
+    .text-neutral-solid-on,
+    .text-success-on,
+    .text-warning-on,
+    .text-danger-on,
+    .text-info-on
+  ) {
+    --hn-on-solid-fill: transparent;
+    --hn-on-solid-border: color-mix(in oklab, currentColor 40%, transparent);
+  }
+}
+
 @utility hn-code {
   font-family: var(--hn-font-mono);
   font-size: 0.875em;
-  background-color: var(--hn-bg-inset);
+  background-color: var(--hn-on-solid-fill, var(--hn-bg-inset));
+  box-shadow: inset 0 0 0 1px var(--hn-on-solid-border, transparent);
   border-radius: var(--hn-radius-sm);
   padding: 0.125em 0.375em;
 }
@@ -144,8 +159,8 @@
 @utility hn-kbd {
   font-family: var(--hn-font-mono);
   font-size: 0.8125em;
-  background-color: var(--hn-surface);
-  border: 1px solid var(--hn-border);
+  background-color: var(--hn-on-solid-fill, var(--hn-surface));
+  border: 1px solid var(--hn-on-solid-border, var(--hn-border));
   border-block-end-width: 2px;
   border-radius: var(--hn-radius-sm);
   padding: 0.0625em 0.375em;

package/dist/types/shared/src/behavior/spoiler/painter.d.ts

@@ -7,29 +7,30 @@ export interface SpoilerPainterOptions {
     mimicWords?: boolean;
     accent?: string;
 }
+export declare const SPOILER_WORKLET_INPUTS: readonly ["--hn-nz-t", "--hn-nz-stop", "--hn-nz-fade", "--hn-nz-gap", "--hn-nz-accent", "--hn-nz-words", "--hn-nz-density"];
 export declare class SpoilerPainter {
     readonly el: HTMLElement;
     maxFPS: number;
-    private t;
-    private t0;
-    private tstop;
-    private raf;
-    private fadeS;
+    private clock;
+    private settle;
+    private running;
+    private inView;
     private hidden;
     private destroyed;
     constructor(el: HTMLElement, options?: SpoilerPainterOptions);
     get isHidden(): boolean;
     update({ fps, gap, density, mimicWords, accent, }?: SpoilerPainterOptions): void;
     private useBackgroundStyle;
+    private easing;
+    private time;
     private setFade;
-    private setT;
     private setTstop;
     private parseFade;
+    private sync;
+    private stopClock;
+    setInView(value: boolean): void;
     hide(animate?: number | boolean): void;
     reveal(animate?: number | boolean): void;
-    private frame;
-    private startAnimation;
-    private stopAnimation;
     destroy(): void;
 }
 //# sourceMappingURL=painter.d.ts.map

package/dist/types/shared/src/behavior/spoiler/painter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"painter.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/behavior/spoiler/painter.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,SAC0D,CAAA;AAI9F,wBAAgB,sBAAsB,SAQrC;AAED,MAAM,WAAW,qBAAqB;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAeD,qBAAa,cAAc;IACzB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAA;IACxB,MAAM,EAAE,MAAM,CAAe;IAE7B,OAAO,CAAC,CAAC,CAAI;IACb,OAAO,CAAC,EAAE,CAAI;IACd,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,GAAG,CAAsB;IACjC,OAAO,CAAC,KAAK,CAAI;IACjB,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;gBAEb,EAAE,EAAE,WAAW,EAAE,OAAO,GAAE,qBAA0B;IAMhE,IAAI,QAAQ,YAEX;IAED,MAAM,CAAC,EACL,GAAkB,EAClB,GAAkB,EAClB,OAA0B,EAC1B,UAAgC,EAChC,MAAwB,GACzB,GAAE,qBAA0B;IAqC7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,SAAS;IAKjB,IAAI,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IAS/B,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IASjC,OAAO,CAAC,KAAK,CAaZ;IAED,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,aAAa;IAOrB,OAAO;CAgBR"}
+{"version":3,"file":"painter.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/behavior/spoiler/painter.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,SAC0D,CAAA;AAI9F,wBAAgB,sBAAsB,SAQrC;AAED,MAAM,WAAW,qBAAqB;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAUD,eAAO,MAAM,sBAAsB,6HAQzB,CAAA;AAkBV,qBAAa,cAAc;IACzB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAA;IACxB,MAAM,EAAE,MAAM,CAAe;IAE7B,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,MAAM,CAA2C;IACzD,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;gBAEb,EAAE,EAAE,WAAW,EAAE,OAAO,GAAE,qBAA0B;IAUhE,IAAI,QAAQ,YAEX;IAED,MAAM,CAAC,EACL,GAAkB,EAClB,GAAkB,EAClB,OAA0B,EAC1B,UAAgC,EAChC,MAAwB,GACzB,GAAE,qBAA0B;IA2C7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,SAAS;IAQjB,SAAS,CAAC,KAAK,EAAE,OAAO;IAMxB,IAAI,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IAgB/B,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IAgBjC,OAAO;CAQR"}

package/dist/types/shared/src/behavior/spoiler/worklet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"worklet.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/behavior/spoiler/worklet.ts"],"names":[],"mappings":"AAsMA,eAAO,MAAM,aAAa,QAAkC,CAAA"}
+{"version":3,"file":"worklet.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/behavior/spoiler/worklet.ts"],"names":[],"mappings":"AAoMA,eAAO,MAAM,aAAa,QAAkC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "description": "The design system behind Hikarinagi: Vue 3 components built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",