4a:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T1a30,'use client'; import * as React from 'react'; import type { IconSet } from './forecast-icons'; import { forecastDays, type ForecastDay } from '@/lib/wxcn/forecast-days.js'; import type { ForecastType, LocationInput, MoonForecast as MoonData } from '@/lib/wxcn/types.js'; import { getMoonForecast, getUpcomingMoonPhases, sampleMoon } from '@/lib/wxcn/moon.js'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { cn } from '@/lib/utils'; import { ForecastScreens } from './forecast-screens'; import MoonDisc from './moon-disc'; export type MoonForecastProps = { iconType?: IconSet; interactive?: boolean; timeZone?: string; type?: ForecastType; size?: 'sm' | 'default' | 'lg'; density?: 'compact' | 'comfortable'; className?: string; location?: LocationInput; forecast?: MoonData; sourceLabel?: string; }; const defaultLocation: LocationInput = { label: 'Austin, TX', latitude: 30.2672, longitude: -97.7431 }; function MoonCardView({ day, action, forecast, date, type, size, density, sourceLabel, location }: { day?: ForecastDay; action?: React.ReactNode; forecast: MoonData; date: (value: string) => string; type: ForecastType; size: 'sm' | 'default' | 'lg'; density: 'compact' | 'comfortable'; sourceLabel: string; location: LocationInput; }) { const view = day && day.entries[0].time !== Date.parse(forecast.date) ? getMoonForecast(new Date(day.entries[0].time)) : forecast; return ( <> {day?.label ?? 'Moon phase'} {location.label} {action}

{view.phaseName}

{view.illumination}% illuminated

{type !== 'simple' && (

Moon age: {view.age} days
Next full moon: {date(view.nextFullMoon)}
Next new moon: {date(view.nextNewMoon)}

)} {!day && sourceLabel && (

{sourceLabel} · {date(view.date)}

)} ); } export function MoonForecast({ iconType, interactive = false, timeZone, type = 'summary', size = 'default', density = 'comfortable', className, location = defaultLocation, forecast = sampleMoon, sourceLabel = '' }: MoonForecastProps) { const [visitorTimeZone, setVisitorTimeZone] = React.useState('UTC'); React.useEffect(() => setVisitorTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone), []); const displayTimeZone = timeZone ?? location.timeZone ?? visitorTimeZone; const date = React.useCallback( (value: string) => new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', timeZone: displayTimeZone }).format(new Date(value)), [displayTimeZone] ); const phases = React.useMemo( () => getUpcomingMoonPhases(new Date(forecast.date)), [forecast.date] ); const days = React.useMemo( () => forecastDays( phases.map((value) => ({ time: Date.parse(value.date), label: value.phaseName, summary: `${value.illumination}% illuminated`, details: '' })), displayTimeZone ), [displayTimeZone, phases] ); return ( (

{phases.map((phase) => (

{phase.phaseName} {date(phase.date)}

))}

)} detail={(day, action) => ( )} > {(_openDay, action) => ( )} ); } export default MoonForecast; 4d:T2191,'use client'; import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'; import { CardAction, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { ForecastIcon, type IconSet } from './forecast-icons'; import type { ForecastDay } from '@/lib/wxcn/forecast-days.js'; export type ForecastAction = (onSurface: boolean) => ReactNode; export type OpenForecastDay = (time: string, trigger: HTMLElement) => void; export interface ForecastScreensProps { interactive: boolean; days: ForecastDay[]; title: string; density: string; sourceLabel: string; summary?: (availableHeight: number) => ReactNode; daySummary?: (day: ForecastDay) => ReactNode; actionLabel?: string; summaryTitle?: string; showWeek?: boolean; iconType?: IconSet; flush?: boolean; detail: (day: ForecastDay, action: ForecastAction) => ReactNode; children: ( openDay: OpenForecastDay, action: ForecastAction, overviewVisible: boolean ) => ReactNode; } export function ForecastScreens({ interactive, days, title, summary, daySummary, actionLabel = 'View week', summaryTitle = 'Upcoming tides', showWeek = true, iconType, flush = false, detail, children }: ForecastScreensProps) { const [screen, setScreen] = useState<'overview' | 'week' | 'day'>('overview'); const [selectedKey, setSelectedKey] = useState(''); const [availableHeight, setAvailableHeight] = useState(0); const surface = useRef(null); const table = useRef(null); const host = useRef(null); const fromWeek = useRef(false); const originIndex = useRef(0); const originTrigger = useRef(null); const focusTarget = useRef<'surface' | 'origin' | 'day' | null>(null); const selected = days.find((day) => day.key === selectedKey); const active = interactive && (screen !== 'day' || selected) ? screen : 'overview'; useEffect(() => { if (active !== screen) setScreen('overview'); }, [active, screen]); useLayoutEffect(() => { if (active !== 'week' || !table.current) return; const node = table.current; const update = () => setAvailableHeight(node.clientHeight); const observer = new ResizeObserver(update); observer.observe(node); update(); return () => observer.disconnect(); }, [active]); useLayoutEffect(() => { const target = focusTarget.current; if (!target) return; if (target === 'surface') { surface.current?.focus({ preventScroll: true }); focusTarget.current = null; return; } if ((target === 'day' && active !== 'week') || (target === 'origin' && active !== 'overview')) return; // Wait for the retained overview or resized detail surface to become visible. let frame = requestAnimationFrame(() => { frame = requestAnimationFrame(() => { const trigger = target === 'day' ? host.current?.querySelector(`[data-forecast-day="${selectedKey}"]`) : originTrigger.current?.isConnected ? originTrigger.current : host.current?.querySelectorAll('button')[originIndex.current]; trigger?.focus({ preventScroll: true }); if (document.activeElement === trigger) focusTarget.current = null; }); }); return () => cancelAnimationFrame(frame); }, [active, selectedKey, availableHeight]); function open(next: 'week' | 'day', trigger: HTMLElement, key = '') { if (active === 'overview') { host.current = trigger.closest('[data-slot=card]'); originTrigger.current = trigger; originIndex.current = host.current ? [...host.current.querySelectorAll('button')].indexOf(trigger as HTMLButtonElement) : 0; } fromWeek.current = active === 'week'; setSelectedKey(key); focusTarget.current = 'surface'; setScreen(next); } const openDay: OpenForecastDay = (time, trigger) => { const day = days.find((day) => day.entries.some((entry) => entry.time === Date.parse(time))); if (day) open('day', trigger, day.key); }; function back() { if (active === 'day' && fromWeek.current) { focusTarget.current = 'day'; setScreen('week'); } else { focusTarget.current = 'origin'; setScreen('overview'); } } const weekAction: ForecastAction = (onSurface) => interactive && showWeek ? ( ) : null; const backAction: ForecastAction = (onSurface) => ( ); return ( <>

{children(openDay, weekAction, active === 'overview')}

{active !== 'overview' && (

{ if (event.key === 'Escape') { event.preventDefault(); back(); } }} className={`absolute inset-0 z-10 flex min-h-0 flex-col overflow-hidden rounded-[inherit] bg-card text-card-foreground outline-none ${active === 'day' && flush ? 'gap-0' : active === 'week' ? 'gap-2 py-3' : 'gap-[var(--card-spacing,var(--wxcn-spacing,1.5rem))] py-[var(--card-spacing,var(--wxcn-spacing,1.5rem))]'}`} > {active === 'day' && selected ? ( detail(selected, backAction) ) : ( <> {summary ? summaryTitle : `${title} • Week`} {backAction(false)}

{summary ? ( summary(availableHeight) ) : (

{days.map((day) => ( ))}

)}

)} ); } 4e:T54d,import * as React from 'react'; import { cn } from '@/lib/utils'; export type MoonDiscProps = React.SVGProps & { phase?: number; label?: string; }; export function MoonDisc({ phase = 0.5, label = 'Full moon', className = 'size-24', ...props }: MoonDiscProps) { const id = React.useId().replace(/:/g, ''); const p = ((phase % 1) + 1) % 1; const waxing = p <= 0.5; const sign = waxing ? 1 : -1; const terminator = Math.cos(p * Math.PI * 2) * sign; const points = Array.from({ length: 97 }, (_, i) => { const y = 1 - i / 48; return `${50 + 46 * Math.sqrt(Math.max(0, 1 - y * y)) * terminator} ${50 + 46 * y}`; }); const light = `M50 4 A46 46 0 0 ${waxing ? 1 : 0} 50 96 L${points.join(' L')} Z`; return ( ); } export default MoonDisc; 4f:T8c1,import { IconPlaceholder } from '@/components/icon-placeholder'; export type IconName = 'arrowUp' | 'arrowDown' | 'weather' | 'sun' | 'moon' | 'tide' | 'wind' | 'rain' | 'snow'; export type IconSet = 'lucide' | 'tabler' | 'phosphor' | 'hugeicons' | 'remixicon'; export type ForecastIconProps = { name: IconName; iconSet?: IconSet; className?: string }; export function ForecastIcon({ name, className = 'size-5' }: ForecastIconProps) { switch (name) { case 'arrowUp': return ; case 'arrowDown': return ; case 'weather': return ; case 'sun': return ; case 'moon': return ; case 'tide': return ; case 'wind': return ; case 'rain': return ; case 'snow': return ; } } 50:T5ea,export type CardSize = 'sm' | 'default' | 'lg'; export type CardDensity = 'compact' | 'comfortable'; export type ForecastType = 'summary' | 'detailed' | 'simple'; export type IconSet = 'hugeicons' | 'phosphor-svelte' | 'lucide' | 'tabler' | 'remix'; export type WeatherUnit = 'fahrenheit' | 'celsius'; export type TideUnit = 'ft' | 'meter'; export type LocationInput = { label?: string; latitude: number; longitude: number; station?: string; timeZone?: string; }; export type WeatherPeriod = { name: string; startTime: string; endTime?: string; temperature: number; temperatureUnit: string; windSpeed: string; windDirection: string; shortForecast: string; detailedForecast: string; isDaytime: boolean; }; export type TidePrediction = { time: string; height: string; type: 'H' | 'L'; }; export type MoonForecast = { date: string; phaseName: string; /** Astronomical phase cycle: 0 new, 0.25 first quarter, 0.5 full. */ phase?: number; illumination: number; age: number; nextFullMoon: string; nextNewMoon: string; }; /** Feet above MLLW. Prefer ISO 8601 timestamps with an explicit offset. */ export type TidePoint = { time: string; height: string }; export type TideReading = TidePoint; /** Current observed conditions; daily extrema use temperatureUnit and the location's calendar day. */ export type CurrentWeather = WeatherPeriod & { observedAt: string; highToday?: number; lowToday?: number; }; export type WeatherBackground = 'none' | 'realistic' | 'dithered' | 'gradient'; 51:T74a,export type ForecastEntry = { time: number; label: string; summary: string; details: string }; export type ForecastDay = { key: string; label: string; entries: ForecastEntry[] }; /** Group supplied periods in the location's calendar, without inventing missing days. */ export function forecastDays(entries: ForecastEntry[], timeZone: string): ForecastDay[] { const key = new Intl.DateTimeFormat('en-CA', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit' }); const label = new Intl.DateTimeFormat('en-US', { timeZone, weekday: 'short', month: 'short', day: 'numeric' }); const days = new Map(); for (const entry of entries .filter((e) => Number.isFinite(e.time)) .toSorted((a, b) => a.time - b.time)) { const id = key.format(entry.time); if (!days.has(id)) days.set(id, { key: id, label: label.format(entry.time), entries: [] }); days.get(id)!.entries.push(entry); } return [...days.values()].slice(0, 7); } /** Resolve noon on a forecast calendar date in the location's time zone, including DST. */ export function forecastDayNoon(key: string, timeZone: string): number { const noon = Date.parse(`${key}T12:00:00Z`); const format = new Intl.DateTimeFormat('en-US', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23' }); let instant = noon; for (let attempt = 0; attempt < 3; attempt++) { const parts = Object.fromEntries( format.formatToParts(instant).map(({ type, value }) => [type, value]) ); const wallTime = Date.UTC( Number(parts.year), Number(parts.month) - 1, Number(parts.day), Number(parts.hour), Number(parts.minute), Number(parts.second) ); const correction = noon - wallTime; instant += correction; if (!correction) break; } return instant; } 52:T5a5,import { Body, Illumination, MoonPhase, SearchMoonPhase } from 'astronomy-engine'; import type { MoonForecast } from './types.js'; const phaseNames = [ 'New Moon', 'Waxing Crescent', 'First Quarter', 'Waxing Gibbous', 'Full Moon', 'Waning Gibbous', 'Last Quarter', 'Waning Crescent' ]; export function getMoonForecast(date = new Date()): MoonForecast { const phase = MoonPhase(date) / 360; const previousNew = SearchMoonPhase(0, date, -40)!; const nextNew = SearchMoonPhase(0, date, 40)!; const nextFull = SearchMoonPhase(180, date, 40)!; return { date: date.toISOString(), phase, phaseName: phaseNames[Math.round(phase * 8) % 8], illumination: Math.round(Illumination(Body.Moon, date).phase_fraction * 100), age: Number(((date.getTime() - previousNew.date.getTime()) / 86400000).toFixed(1)), nextFullMoon: nextFull.date.toISOString(), nextNewMoon: nextNew.date.toISOString() }; } /** The next seven named phases, at their exact 45-degree lunar phase crossings. */ export function getUpcomingMoonPhases(date = new Date()): MoonForecast[] { return phaseNames .map((phaseName, index) => { const event = SearchMoonPhase(index * 45, new Date(date.getTime() + 1000), 40)!; return { ...getMoonForecast(event.date), phase: index / 8, phaseName }; }) .sort((a, b) => Date.parse(a.date) - Date.parse(b.date)) .slice(0, 7); } export const sampleMoon = getMoonForecast(new Date('2026-09-06T12:00:00-05:00')); 49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","astronomy-engine@2.1.19",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/astronomy-engine","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"astronomy-engine@2.1.19"}]]}]}]]}],["$","$L4a",null,{"namespace":"@wxcn","registryDependencies":["card","button"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"packages/react/src/components/wxcn/moon-forecast.tsx","content":"$4c","type":"registry:component","target":"@components/wxcn/moon-forecast.tsx"},{"path":"packages/react/src/components/wxcn/forecast-screens.tsx","content":"$4d","type":"registry:component","target":"@components/wxcn/forecast-screens.tsx"},{"path":"packages/react/src/components/wxcn/moon-disc.tsx","content":"$4e","type":"registry:component","target":"@components/wxcn/moon-disc.tsx"},{"path":"packages/react/src/icons/forecast-icons.tsx","content":"$4f","type":"registry:component","target":"@components/wxcn/forecast-icons.tsx"},{"path":"packages/core/src/types.ts","content":"$50","type":"registry:lib","target":"@lib/wxcn/types.ts"},{"path":"packages/core/src/forecast-days.ts","content":"$51","type":"registry:lib","target":"@lib/wxcn/forecast-days.ts"},{"path":"packages/core/src/moon.ts","content":"$52","type":"registry:lib","target":"@lib/wxcn/moon.ts"}],"className":"h-[70svh] min-h-80"}]]}]