@mhmo91/schmancy 0.10.32 → 0.10.34

package/src/directives/art/effects/starfield.ts

@@ -1,107 +1,252 @@
 /**
- * Starfield Effect — Night sky with twinkling stars.
+ * Starfield Effect — surreal deep-space drift with rare comets.
  *
- * 6 groups × 7 stars using CSS radial-gradient backgrounds.
- * Wave-by-wave fade-in (group 0 first, then 1, 2, …); gentle twinkle once visible.
- * Opacity driven by RAF instead of CSS @keyframes to avoid Shadow DOM scoping.
+ * A recessive page backdrop. One <canvas>; stars live in
+ * structure-of-arrays Float32Array tables (zero per-frame allocation) and
+ * render as pre-rendered glow sprites via drawImage — no gradient is built
+ * inside the RAF loop. Three parallax depth layers drift on slow orbit paths;
+ * colour temperature runs blue-white → warm; entrance reveals far→near in
+ * waves behind a faint corner nebula; a pooled comet streaks by rarely.
+ * Sparse and dim by design — tune reach with the `density` ArtOption.
+ *
+ * Performance budget: ≤ MAX_STAR_COUNT drawImage calls + one nebula blit per
+ * frame, dpr capped at 2, the whole field idle under prefers-reduced-motion.
  */
 
 import type { ArtState } from '../types'
 import { createOverlayContainer } from '../utils'
 
-const GROUP_COUNT = 6
-const STARS_PER_GROUP = 7
-
-function generateStarGroups() {
-	return Array.from({ length: GROUP_COUNT }, (_, g) => {
-		const stops: string[] = []
-		for (let i = 0; i < STARS_PER_GROUP; i++) {
-			const x = Math.random() * 96 + 2
-			const y = Math.random() * 94 + 3
-			const size = 0.8 + Math.random() * 1.5
-			const alpha = 0.3 + Math.random() * 0.7
-			stops.push(
-				`radial-gradient(circle ${size}px at ${x}% ${y}%, rgba(255,255,255,${alpha}) 0%, transparent 100%)`,
-			)
-		}
-		const appearDelay = g * 0.6
-		return {
-			bg: stops.join(','),
-			appearDelay,
-			twinkleDuration: 5 + g * 0.7,
-			twinkleDelay: appearDelay + 2.5,
-		}
-	})
-}
+const BASE_STAR_COUNT = 90
+// Hard ceiling: a wide monitor must never carpet, whatever the density prop asks.
+const MAX_STAR_COUNT = 140
+const COMET_POOL = 3
+const APPEAR_DURATION = 2.5
+const SPRITE_PX = 64
+// Cool → warm. Index 0 is the dominant blue-white; the tail warms toward amber.
+const TEMPERATURE_RGB = [
+	[205, 222, 255],
+	[224, 233, 255],
+	[255, 255, 255],
+	[255, 240, 214],
+	[255, 222, 184],
+]
 
 export function createStarfieldOverlay(state: ArtState): void {
 	const { element } = state
 	const overlay = createOverlayContainer('starfield-overlay')
 
-	const starArea = document.createElement('div')
-	starArea.style.cssText = 'position:absolute;bottom:0;right:0;width:66vw;height:66vw;'
-	overlay.appendChild(starArea)
-
-	const generated = generateStarGroups()
-	const groups: NonNullable<ArtState['starfield']>['groups'] = []
-
-	for (const g of generated) {
-		const div = document.createElement('div')
-		div.style.cssText = `position:absolute;inset:0;opacity:0;will-change:opacity;background:${g.bg};`
-		starArea.appendChild(div)
-		groups.push({
-			element: div,
-			appearDelay: g.appearDelay,
-			twinkleDuration: g.twinkleDuration,
-			twinkleDelay: g.twinkleDelay,
-		})
+	const canvas = document.createElement('canvas')
+	canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;'
+	overlay.appendChild(canvas)
+	element.appendChild(overlay)
+
+	const ctx = canvas.getContext('2d')
+	if (!ctx) return
+
+	const dpr = Math.min(window.devicePixelRatio || 1, 2)
+	const rect = element.getBoundingClientRect()
+	const deviceWidth = Math.max(1, Math.round(rect.width * dpr))
+	const deviceHeight = Math.max(1, Math.round(rect.height * dpr))
+	canvas.width = deviceWidth
+	canvas.height = deviceHeight
+
+	const sprites = TEMPERATURE_RGB.map(([r, g, b]) => {
+		const s = document.createElement('canvas')
+		s.width = SPRITE_PX
+		s.height = SPRITE_PX
+		const sc = s.getContext('2d')!
+		const grad = sc.createRadialGradient(SPRITE_PX / 2, SPRITE_PX / 2, 0, SPRITE_PX / 2, SPRITE_PX / 2, SPRITE_PX / 2)
+		grad.addColorStop(0, `rgba(${r},${g},${b},1)`)
+		grad.addColorStop(0.18, `rgba(${r},${g},${b},0.35)`)
+		grad.addColorStop(0.5, `rgba(${r},${g},${b},0)`)
+		sc.fillStyle = grad
+		sc.fillRect(0, 0, SPRITE_PX, SPRITE_PX)
+		return s
+	})
+
+	const nebula = document.createElement('canvas')
+	nebula.width = 512
+	nebula.height = 512
+	const nc = nebula.getContext('2d')!
+	const ng = nc.createRadialGradient(256, 256, 0, 256, 256, 256)
+	ng.addColorStop(0, 'rgba(150,170,255,0.16)')
+	ng.addColorStop(0.4, 'rgba(120,110,210,0.07)')
+	ng.addColorStop(1, 'rgba(0,0,0,0)')
+	nc.fillStyle = ng
+	nc.fillRect(0, 0, 512, 512)
+
+	const starCount = Math.min(
+		MAX_STAR_COUNT,
+		Math.round(BASE_STAR_COUNT * Math.min(1, Math.max(0.5, (rect.width * rect.height) / (1280 * 720))) * state.density),
+	)
+	const sx = new Float32Array(starCount)
+	const sy = new Float32Array(starCount)
+	const sr = new Float32Array(starCount)
+	const sphase = new Float32Array(starCount)
+	const stwinkle = new Float32Array(starCount)
+	const sdepth = new Float32Array(starCount)
+	const sbucket = new Uint8Array(starCount)
+	const sappear = new Float32Array(starCount)
+
+	for (let i = 0; i < starCount; i++) {
+		const depthBand = i % 3 // 0 far, 1 mid, 2 near — even split across layers
+		const depth = depthBand === 0 ? 0.18 : depthBand === 1 ? 0.5 : 1
+		sx[i] = Math.random()
+		sy[i] = Math.random()
+		sr[i] = (0.7 + Math.random() * 1.6) * (0.6 + 0.7 * depth)
+		sphase[i] = Math.random() * Math.PI * 2
+		stwinkle[i] = 0.6 + Math.random() * 1.8
+		sdepth[i] = depth
+		// Field skews blue-white; only a minority warms — that asymmetry reads as authored.
+		sbucket[i] = Math.random() < 0.7 ? (Math.random() < 0.5 ? 0 : 1) : 2 + Math.floor(Math.random() * 3)
+		// Far layer arrives first, near layer last → the depth reveals as waves.
+		sappear[i] = (1 - depth) * 1.6 + Math.random() * 0.8
 	}
 
-	element.appendChild(overlay)
 	state.overlayElement = overlay
-	state.starfield = { groups, startTime: performance.now() }
+	state.starfield = {
+		canvas,
+		ctx,
+		sprites,
+		nebula,
+		starCount,
+		sx,
+		sy,
+		sr,
+		sphase,
+		stwinkle,
+		sdepth,
+		sbucket,
+		sappear,
+		cx: new Float32Array(COMET_POOL),
+		cy: new Float32Array(COMET_POOL),
+		cvx: new Float32Array(COMET_POOL),
+		cvy: new Float32Array(COMET_POOL),
+		clife: new Float32Array(COMET_POOL),
+		cometCount: COMET_POOL,
+		nextCometAt: performance.now() + 14000 + Math.random() * 16000,
+		dpr,
+		deviceWidth,
+		deviceHeight,
+		reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+		drawnStatic: false,
+		lastFrame: performance.now(),
+		startTime: performance.now(),
+	}
 }
 
 export function animateStarfield(state: ArtState, currentTime: number): void {
-	if (!state.starfield) return
+	const sf = state.starfield
+	if (!sf) return
 
 	const { intensity = 1, speed = 1 } = state
-	const { groups, startTime } = state.starfield
-	const elapsed = ((currentTime - startTime) / 1000) * speed
+	const { ctx, canvas } = sf
+
+	if (intensity <= 0) {
+		ctx.clearRect(0, 0, sf.deviceWidth, sf.deviceHeight)
+		return
+	}
 
-	for (const g of groups) {
-		if (intensity <= 0) {
-			g.element.style.opacity = '0'
+	// One layout read per frame; resize only when the backing store must change.
+	const cssW = canvas.clientWidth
+	const cssH = canvas.clientHeight
+	const wantW = Math.max(1, Math.round(cssW * sf.dpr))
+	const wantH = Math.max(1, Math.round(cssH * sf.dpr))
+	if (wantW !== sf.deviceWidth || wantH !== sf.deviceHeight) {
+		canvas.width = wantW
+		canvas.height = wantH
+		sf.deviceWidth = wantW
+		sf.deviceHeight = wantH
+		sf.drawnStatic = false
+	}
+
+	const W = sf.deviceWidth
+	const H = sf.deviceHeight
+
+	if (sf.reducedMotion && sf.drawnStatic) return
+
+	const elapsed = ((currentTime - sf.startTime) / 1000) * speed
+	const dt = Math.min((currentTime - sf.lastFrame) / 1000, 0.05)
+	sf.lastFrame = currentTime
+
+	ctx.clearRect(0, 0, W, H)
+
+	// Entrance nebula: blooms in over the first ~4s, then holds at a faint floor.
+	const nebulaAlpha = (Math.min(1, elapsed / 4) * 0.7 + 0.3) * 0.14 * intensity
+	if (nebulaAlpha > 0.001) {
+		const nSize = Math.max(W, H) * 1.3
+		ctx.globalAlpha = nebulaAlpha
+		ctx.drawImage(sf.nebula, W * 0.78 - nSize / 2, H * 0.28 - nSize / 2, nSize, nSize)
+	}
+
+	// Normal compositing — additive blend is what turned overlap into a glowing carpet.
+	for (let i = 0; i < sf.starCount; i++) {
+		const appear = sf.sappear[i]
+		let reveal: number
+		if (sf.reducedMotion) {
+			reveal = 1
+		} else if (elapsed < appear) {
 			continue
+		} else if (elapsed < appear + APPEAR_DURATION) {
+			const t = (elapsed - appear) / APPEAR_DURATION
+			reveal = 1 - (1 - t) * (1 - t) * (1 - t)
+		} else {
+			reveal = 1
 		}
 
-		const appearStart = g.appearDelay
-		const appearEnd = appearStart + 2.5
-		let opacity: number
+		const depth = sf.sdepth[i]
+		const twinkle = sf.reducedMotion ? 0.9 : 0.82 + 0.18 * Math.sin(elapsed * sf.stwinkle[i] + sf.sphase[i])
 
-		if (elapsed < appearStart) {
-			opacity = 0
-		} else if (elapsed < appearEnd) {
-			const t = (elapsed - appearStart) / 2.5
-			opacity = 1 - Math.pow(1 - t, 3)
-		} else {
-			const twinkleElapsed = elapsed - g.twinkleDelay
-			if (twinkleElapsed < 0) {
-				opacity = 1
-			} else {
-				const cycle = (twinkleElapsed % g.twinkleDuration) / g.twinkleDuration
-				if (cycle < 0.25) {
-					opacity = 1 - (cycle / 0.25) * 0.4
-				} else if (cycle < 0.5) {
-					opacity = 0.6 + ((cycle - 0.25) / 0.25) * 0.25
-				} else if (cycle < 0.75) {
-					opacity = 0.85 - ((cycle - 0.5) / 0.25) * 0.3
-				} else {
-					opacity = 0.55 + ((cycle - 0.75) / 0.25) * 0.45
-				}
+		// Slow orbit drift, amplitude scaled by depth — the parallax is the surreality.
+		const driftAmp = sf.reducedMotion ? 0 : depth * 14 * sf.dpr
+		const px = sf.sx[i] * W + Math.sin(elapsed * 0.05 + sf.sphase[i]) * driftAmp
+		const py = sf.sy[i] * H + Math.cos(elapsed * 0.04 + sf.sphase[i]) * driftAmp * 0.6
+
+		const size = sf.sr[i] * sf.dpr * 2.3
+		ctx.globalAlpha = reveal * twinkle * (0.3 + 0.5 * depth) * intensity
+		ctx.drawImage(sf.sprites[sf.sbucket[i]], px - size, py - size, size * 2, size * 2)
+	}
+
+	if (!sf.reducedMotion) {
+		if (currentTime >= sf.nextCometAt) {
+			for (let c = 0; c < sf.cometCount; c++) {
+				if (sf.clife[c] > 0) continue
+				const fromLeft = Math.random() < 0.5
+				sf.cx[c] = (fromLeft ? -0.05 : 1.05) * W
+				sf.cy[c] = Math.random() * 0.45 * H
+				const sp = (520 + Math.random() * 420) * sf.dpr
+				sf.cvx[c] = (fromLeft ? 1 : -1) * sp
+				sf.cvy[c] = (0.35 + Math.random() * 0.35) * sp
+				sf.clife[c] = 1
+				break
 			}
+			sf.nextCometAt = currentTime + (20000 + Math.random() * 25000) / speed
 		}
 
-		g.element.style.opacity = (opacity * intensity).toFixed(3)
+		for (let c = 0; c < sf.cometCount; c++) {
+			if (sf.clife[c] <= 0) continue
+			sf.cx[c] += sf.cvx[c] * dt * speed
+			sf.cy[c] += sf.cvy[c] * dt * speed
+			sf.clife[c] -= dt / 1.6
+
+			const tailX = sf.cx[c] - sf.cvx[c] * 0.16
+			const tailY = sf.cy[c] - sf.cvy[c] * 0.16
+			const grad = ctx.createLinearGradient(sf.cx[c], sf.cy[c], tailX, tailY)
+			const headA = Math.max(0, Math.min(1, sf.clife[c])) * 0.55 * intensity
+			grad.addColorStop(0, `rgba(255,255,255,${headA})`)
+			grad.addColorStop(0.4, `rgba(190,210,255,${headA * 0.4})`)
+			grad.addColorStop(1, 'rgba(190,210,255,0)')
+			ctx.globalAlpha = 1
+			ctx.strokeStyle = grad
+			ctx.lineWidth = 2 * sf.dpr
+			ctx.lineCap = 'round'
+			ctx.beginPath()
+			ctx.moveTo(sf.cx[c], sf.cy[c])
+			ctx.lineTo(tailX, tailY)
+			ctx.stroke()
+		}
 	}
+
+	ctx.globalAlpha = 1
+	sf.drawnStatic = true
 }

package/src/directives/art/types.ts

@@ -15,6 +15,8 @@ export interface ArtOptions {
 	intensity?: number
 	/** Animation speed multiplier: 0.5 = half speed, 1 = normal, 2 = double (default: 1) */
 	speed?: number
+	/** Particle density multiplier: 0.5 = sparse, 1 = baseline, 2 = dense (default: 1; starfield only) */
+	density?: number
 }
 
 export interface Particle<T extends SVGElement = SVGElement> {
@@ -52,6 +54,7 @@ export interface ArtState {
 	color: string
 	intensity: number
 	speed: number
+	density: number
 	element: HTMLElement
 	overlayElement?: HTMLElement
 	animationId?: number
@@ -118,12 +121,44 @@ export interface ArtState {
 	}
 
 	starfield?: {
-		groups: Array<{
-			element: HTMLDivElement
-			appearDelay: number
-			twinkleDuration: number
-			twinkleDelay: number
-		}>
+		canvas: HTMLCanvasElement
+		ctx: CanvasRenderingContext2D
+		/** Pre-rendered glow sprites, cool→warm. Drawn per star so no per-frame gradient is built. */
+		sprites: HTMLCanvasElement[]
+		/** Pre-rendered entrance nebula bloom, drawn once per frame at a computed alpha. */
+		nebula: HTMLCanvasElement
+		starCount: number
+		/** Structure-of-arrays star table — cache-friendly, zero allocation per frame. */
+		sx: Float32Array
+		sy: Float32Array
+		sr: Float32Array
+		sphase: Float32Array
+		stwinkle: Float32Array
+		/** 0 = far (drifts least, dimmest) → 1 = near (drifts most, brightest). */
+		sdepth: Float32Array
+		/** Index into `sprites` — fixes each star's colour temperature for its life. */
+		sbucket: Uint8Array
+		/** Per-star entrance delay (s) so the field reveals far→near in waves. */
+		sappear: Float32Array
+		/** Fixed comet pool. `life <= 0` marks a free slot; no array churn. */
+		cx: Float32Array
+		cy: Float32Array
+		cvx: Float32Array
+		cvy: Float32Array
+		clife: Float32Array
+		cometCount: number
+		/** ms timestamp of the next comet spawn — gates the rare streak. */
+		nextCometAt: number
+		/** Capped device-pixel-ratio; bounds backing-store fill cost on retina. */
+		dpr: number
+		/** Cached device-pixel canvas size; a change is the only resize trigger. */
+		deviceWidth: number
+		deviceHeight: number
+		/** Static-render once, then idle the RAF loop. */
+		reducedMotion: boolean
+		drawnStatic: boolean
+		/** Previous frame ms — frame-rate-independent comet motion + jump clamp. */
+		lastFrame: number
 		startTime: number
 	}
 }

package/src/overlay/overlay.component.ts

@@ -96,6 +96,21 @@ export class SchmancyOverlay extends SchmancyElement {
 		margin: 0;
 		border: 0;
 	}
+	/* Modal tier promotes the whole shell (scrim + surface) into the top
+	 * layer so every overlay — anchored or modal — shares ONE stacking
+	 * domain ordered strictly by show() time. Neutralize the UA popover
+	 * box so the shell stays full-viewport. */
+	.shell:popover-open {
+		inset: 0;
+		margin: 0;
+		border: 0;
+		width: 100%;
+		height: 100%;
+		max-width: none;
+		max-height: none;
+		background: transparent;
+		overflow: visible;
+	}
 `]
 
 	@property({ type: String, reflect: true }) layout: OverlayLayout = 'sheet'
@@ -107,6 +122,7 @@ export class SchmancyOverlay extends SchmancyElement {
 
 	@query('.backdrop') private _backdrop?: HTMLDivElement
 	@query('.surface') private _surface!: HTMLElement
+	@query('.shell') private _shell?: HTMLElement
 
 	/** Close trigger for the service; emits the reason + detail payload. */
 	private readonly _closed$ = new Subject<{ reason: CloseReason; result?: unknown }>()
@@ -203,6 +219,18 @@ export class SchmancyOverlay extends SchmancyElement {
 				.pipe(takeUntil(this.disconnecting))
 				.subscribe()
 			this._positionerTeardown = () => floatSub.unsubscribe()
+		} else if (this.tier === 'modal' && this._shell) {
+			// Promote the whole modal shell (scrim + surface) into the native
+			// top layer — the same domain anchored tiers already use. The top
+			// layer paints strictly in show() order, so a sheet opened from
+			// inside an earlier anchored overlay correctly stacks above it
+			// (and recedes behind anything opened after it). Degrade silently
+			// to the legacy z-index host on browsers without the Popover API.
+			try {
+				this._positionerTeardown = positionPopoverAPI(this._shell)
+			} catch {
+				// no Popover API support — keep the host z-index:10000 path.
+			}
 		}
 
 		// Set the anchor-origin CSS vars so the entrance animation blooms

package/types/src/boat/boat.d.ts

@@ -1,53 +1,46 @@
 import { SchmancyElement } from '@mixins/index';
+import { type PropertyValues } from 'lit';
 type Corner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-type BoatState = 'collapsed' | 'expanded';
+/**
+ * Material-3 extended FAB that delegates its expanded panel to the `show()`
+ * overlay service. Collapsed: a draggable, corner-anchored pill (icon + label,
+ * circular when no label). Activated: the default-slot content blooms from the
+ * FAB as an overlay (backdrop / Esc / back-button / sheet-on-narrow handled by
+ * the overlay primitive).
+ */
 export default class SchmancyBoat extends SchmancyElement {
+    #private;
     static styles: import("lit").CSSResult[];
     id: string;
     icon?: string;
     label?: string;
-    /** Override the expanded panel width (e.g. '320px', '24rem'). Defaults to responsive sizing. */
-    expandedWidth?: string;
-    /** When true, uses a lower elevation shadow in the minimized (FAB) state. */
+    /** When true, uses a lower elevation shadow on the FAB. */
     lowered: boolean;
-    /** Corner the boat is anchored to. */
+    /** Corner the FAB is anchored to. */
     corner: Corner;
-    /** Whether the panel is open. */
+    /** Open state. Bind `?open=${…}` to drive the overlay; reflected to the attribute. */
     open: boolean;
-    /**
-     * State property.
-     * Maps 'expanded' → open=true, 'collapsed' → open=false (FAB visible).
-     */
-    get state(): BoatState;
-    set state(val: BoatState);
     private isDragging;
-    private _position;
     private _currentCorner;
+    private _slotted;
+    private _position;
     private _containerRef;
-    private _contentRef;
     private _headerRef;
     private _currentAnimation?;
-    private get panelWidth();
-    private get isBottomCorner();
-    private get closedClipPath();
-    private get openClipPath();
-    private get elevation();
     private _applyContainerPosition;
     private _loadPosition;
     private _savePosition;
     private _validateBounds;
     private _reorientToNearestCorner;
     private _setupDrag;
+    private _openOverlay;
+    private _restoreSlotted;
     connectedCallback(): void;
     firstUpdated(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
     disconnectedCallback(): void;
-    private _animateOpen;
-    private _animateClose;
+    /** Flip open ↔ closed. */
     toggle(): void;
-    expand(): void;
-    /** Alias for expand() — kept for backwards compatibility. */
-    show(): void;
-    close(): void;
     protected render(): unknown;
 }
 declare global {

package/types/src/directives/art/effects/starfield.d.ts

@@ -1,9 +1,16 @@
 /**
- * Starfield Effect — Night sky with twinkling stars.
+ * Starfield Effect — surreal deep-space drift with rare comets.
  *
- * 6 groups × 7 stars using CSS radial-gradient backgrounds.
- * Wave-by-wave fade-in (group 0 first, then 1, 2, …); gentle twinkle once visible.
- * Opacity driven by RAF instead of CSS @keyframes to avoid Shadow DOM scoping.
+ * A recessive page backdrop. One <canvas>; stars live in
+ * structure-of-arrays Float32Array tables (zero per-frame allocation) and
+ * render as pre-rendered glow sprites via drawImage — no gradient is built
+ * inside the RAF loop. Three parallax depth layers drift on slow orbit paths;
+ * colour temperature runs blue-white → warm; entrance reveals far→near in
+ * waves behind a faint corner nebula; a pooled comet streaks by rarely.
+ * Sparse and dim by design — tune reach with the `density` ArtOption.
+ *
+ * Performance budget: ≤ MAX_STAR_COUNT drawImage calls + one nebula blit per
+ * frame, dpr capped at 2, the whole field idle under prefers-reduced-motion.
  */
 import type { ArtState } from '../types';
 export declare function createStarfieldOverlay(state: ArtState): void;

package/types/src/directives/art/types.d.ts

@@ -12,6 +12,8 @@ export interface ArtOptions {
     intensity?: number;
     /** Animation speed multiplier: 0.5 = half speed, 1 = normal, 2 = double (default: 1) */
     speed?: number;
+    /** Particle density multiplier: 0.5 = sparse, 1 = baseline, 2 = dense (default: 1; starfield only) */
+    density?: number;
 }
 export interface Particle<T extends SVGElement = SVGElement> {
     element: T;
@@ -46,6 +48,7 @@ export interface ArtState {
     color: string;
     intensity: number;
     speed: number;
+    density: number;
     element: HTMLElement;
     overlayElement?: HTMLElement;
     animationId?: number;
@@ -115,12 +118,44 @@ export interface ArtState {
         startTime: number;
     };
     starfield?: {
-        groups: Array<{
-            element: HTMLDivElement;
-            appearDelay: number;
-            twinkleDuration: number;
-            twinkleDelay: number;
-        }>;
+        canvas: HTMLCanvasElement;
+        ctx: CanvasRenderingContext2D;
+        /** Pre-rendered glow sprites, cool→warm. Drawn per star so no per-frame gradient is built. */
+        sprites: HTMLCanvasElement[];
+        /** Pre-rendered entrance nebula bloom, drawn once per frame at a computed alpha. */
+        nebula: HTMLCanvasElement;
+        starCount: number;
+        /** Structure-of-arrays star table — cache-friendly, zero allocation per frame. */
+        sx: Float32Array;
+        sy: Float32Array;
+        sr: Float32Array;
+        sphase: Float32Array;
+        stwinkle: Float32Array;
+        /** 0 = far (drifts least, dimmest) → 1 = near (drifts most, brightest). */
+        sdepth: Float32Array;
+        /** Index into `sprites` — fixes each star's colour temperature for its life. */
+        sbucket: Uint8Array;
+        /** Per-star entrance delay (s) so the field reveals far→near in waves. */
+        sappear: Float32Array;
+        /** Fixed comet pool. `life <= 0` marks a free slot; no array churn. */
+        cx: Float32Array;
+        cy: Float32Array;
+        cvx: Float32Array;
+        cvy: Float32Array;
+        clife: Float32Array;
+        cometCount: number;
+        /** ms timestamp of the next comet spawn — gates the rare streak. */
+        nextCometAt: number;
+        /** Capped device-pixel-ratio; bounds backing-store fill cost on retina. */
+        dpr: number;
+        /** Cached device-pixel canvas size; a change is the only resize trigger. */
+        deviceWidth: number;
+        deviceHeight: number;
+        /** Static-render once, then idle the RAF loop. */
+        reducedMotion: boolean;
+        drawnStatic: boolean;
+        /** Previous frame ms — frame-rate-independent comet motion + jump clamp. */
+        lastFrame: number;
         startTime: number;
     };
 }

package/types/src/overlay/overlay.component.d.ts

@@ -30,6 +30,7 @@ export declare class SchmancyOverlay extends SchmancyElement {
     private _active;
     private _backdrop?;
     private _surface;
+    private _shell?;
     /** Close trigger for the service; emits the reason + detail payload. */
     private readonly _closed$;
     private _mounted;