npm - @epic-web/workshop-app - Versions diffs - 4.6.6 → 4.7.0 - Mend

@epic-web/workshop-app 4.6.6 → 4.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (809) hide show

package/build/client/assets/_layout-CNgYirUN.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"_layout-CNgYirUN.js","sources":["../../../../../node_modules/framer-motion/dist/es/animation/hooks/animation-controls.mjs","../../../../../node_modules/framer-motion/dist/es/animation/hooks/use-animation.mjs","../../../app/routes/_app+/_layout.tsx"],"sourcesContent":["import { invariant } from '../../utils/errors.mjs';\nimport { setTarget } from '../../render/utils/setters.mjs';\nimport { animateVisualElement } from '../interfaces/visual-element.mjs';\n\nfunction stopAnimation(visualElement) {\n visualElement.values.forEach((value) => value.stop());\n}\nfunction setVariants(visualElement, variantLabels) {\n const reversedLabels = [...variantLabels].reverse();\n reversedLabels.forEach((key) => {\n const variant = visualElement.getVariant(key);\n variant && setTarget(visualElement, variant);\n if (visualElement.variantChildren) {\n visualElement.variantChildren.forEach((child) => {\n setVariants(child, variantLabels);\n });\n }\n });\n}\nfunction setValues(visualElement, definition) {\n if (Array.isArray(definition)) {\n return setVariants(visualElement, definition);\n }\n else if (typeof definition === \"string\") {\n return setVariants(visualElement, [definition]);\n }\n else {\n setTarget(visualElement, definition);\n }\n}\n/**\n * @public\n */\nfunction animationControls() {\n /**\n * Track whether the host component has mounted.\n */\n let hasMounted = false;\n /**\n * A collection of linked component animation controls.\n */\n const subscribers = new Set();\n const controls = {\n subscribe(visualElement) {\n subscribers.add(visualElement);\n return () => void subscribers.delete(visualElement);\n },\n start(definition, transitionOverride) {\n invariant(hasMounted, \"controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.\");\n const animations = [];\n subscribers.forEach((visualElement) => {\n animations.push(animateVisualElement(visualElement, definition, {\n transitionOverride,\n }));\n });\n return Promise.all(animations);\n },\n set(definition) {\n invariant(hasMounted, \"controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.\");\n return subscribers.forEach((visualElement) => {\n setValues(visualElement, definition);\n });\n },\n stop() {\n subscribers.forEach((visualElement) => {\n stopAnimation(visualElement);\n });\n },\n mount() {\n hasMounted = true;\n return () => {\n hasMounted = false;\n controls.stop();\n };\n },\n };\n return controls;\n}\n\nexport { animationControls, setValues };\n","import { animationControls } from './animation-controls.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\n\n/**\n * Creates `AnimationControls`, which can be used to manually start, stop\n * and sequence animations on one or more components.\n *\n * The returned `AnimationControls` should be passed to the `animate` property\n * of the components you want to animate.\n *\n * These components can then be animated with the `start` method.\n *\n * ```jsx\n * import * as React from 'react'\n * import { motion, useAnimation } from 'framer-motion'\n *\n * export function MyComponent(props) {\n * const controls = useAnimation()\n *\n * controls.start({\n * x: 100,\n * transition: { duration: 0.5 },\n * })\n *\n * return <motion.div animate={controls} />\n * }\n * ```\n *\n * @returns Animation controller with `start` and `stop` methods\n *\n * @public\n */\nfunction useAnimationControls() {\n const controls = useConstant(animationControls);\n useIsomorphicLayoutEffect(controls.mount, []);\n return controls;\n}\nconst useAnimation = useAnimationControls;\n\nexport { useAnimation, useAnimationControls };\n","import {\n\textractNumbersAndTypeFromAppNameOrPath,\n\tgetExercises,\n\tgetPlaygroundAppName,\n\tgetWorkshopTitle,\n} from '@epic-web/workshop-utils/apps.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n} from '@epic-web/workshop-utils/timing.server'\nimport {\n\tjson,\n\ttype HeadersFunction,\n\ttype LoaderFunctionArgs,\n} from '@remix-run/node'\nimport {\n\tLink,\n\tNavLink,\n\tOutlet,\n\tuseLoaderData,\n\tuseParams,\n} from '@remix-run/react'\nimport { clsx } from 'clsx'\nimport {\n\tmotion,\n\tuseAnimationControls,\n\ttype AnimationControls,\n} from 'framer-motion'\nimport * as React from 'react'\nimport { Icon } from '#app/components/icons.tsx'\nimport {\n\tSimpleTooltip,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from '#app/components/ui/tooltip.tsx'\nimport { useOptionalUser } from '#app/components/user.tsx'\nimport { cn } from '#app/utils/misc.tsx'\nimport { usePresence, type User } from '#app/utils/presence.tsx'\nimport {\n\tuseExerciseProgressClassName,\n\tuseNextExerciseRoute,\n\tuseProgressItemClassName,\n\ttype ProgressItemSearch,\n} from '../progress.tsx'\nimport { ThemeSwitch } from '../theme/index.tsx'\n\nexport async function loader({ request }: LoaderFunctionArgs) {\n\tconst timings = makeTimings('stepLoader')\n\tconst [exercises, workshopTitle, playgroundAppName] = await Promise.all([\n\t\tgetExercises({ request, timings }),\n\t\tgetWorkshopTitle(),\n\t\tgetPlaygroundAppName(),\n\t])\n\n\tconst playground = {\n\t\tappName: playgroundAppName,\n\t\texerciseNumber: Number(\n\t\t\textractNumbersAndTypeFromAppNameOrPath(playgroundAppName ?? '')\n\t\t\t\t?.exerciseNumber,\n\t\t),\n\t}\n\n\tconst result = json(\n\t\t{\n\t\t\tworkshopTitle,\n\t\t\texercises: exercises.map((e) => ({\n\t\t\t\texerciseNumber: e.exerciseNumber,\n\t\t\t\ttitle: e.title,\n\t\t\t\tsolutions: e.solutions.map(({ stepNumber, title, name }) => ({\n\t\t\t\t\tstepNumber,\n\t\t\t\t\ttitle,\n\t\t\t\t\tname,\n\t\t\t\t})),\n\t\t\t\tproblems: e.problems.map(({ stepNumber, title, name }) => ({\n\t\t\t\t\tstepNumber,\n\t\t\t\t\ttitle,\n\t\t\t\t\tname,\n\t\t\t\t})),\n\t\t\t\tsteps: e.steps.map(({ stepNumber, problem, solution }) => ({\n\t\t\t\t\tstepNumber,\n\t\t\t\t\ttitle: problem?.title ?? solution?.title ?? 'Unknown',\n\t\t\t\t\tname: problem?.name ?? solution?.name ?? 'Unknown',\n\t\t\t\t})),\n\t\t\t})),\n\t\t\tplayground,\n\t\t},\n\t\t{\n\t\t\theaders: {\n\t\t\t\tVary: 'Cookie',\n\t\t\t\t'Server-Timing': getServerTimeHeader(timings),\n\t\t\t},\n\t\t},\n\t)\n\treturn result\n}\n\nexport const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {\n\tconst headers = {\n\t\t'Cache-Control': loaderHeaders.get('Cache-Control') ?? '',\n\t\tVary: 'Cookie',\n\t\t'Server-Timing': combineServerTimings(loaderHeaders, parentHeaders),\n\t}\n\treturn headers\n}\n\nconst opacities = ['opacity-70', 'opacity-80', 'opacity-90', 'opacity-100']\nconst shadows = [\n\t'shadow-[0_0_2px_0_rgba(0,0,0,0.3)]',\n\t'shadow-[0_0_4px_0_rgba(0,0,0,0.3)]',\n\t'shadow-[0_0_7px_0_rgba(0,0,0,0.3)]',\n\t'shadow-[0_0_10px_0_rgba(0,0,0,0.3)]',\n]\nfunction getScoreClassNames(score: number) {\n\tconst opacityNumber = Math.round(score * opacities.length - 1)\n\tconst shadowNumber = Math.round(score * shadows.length - 1)\n\treturn cn(\n\t\t'shadow-purple-700 hover:opacity-100 focus:opacity-100 dark:shadow-purple-200',\n\t\topacities[opacityNumber] ?? 'opacity-60',\n\t\tshadows[shadowNumber] ?? 'shadow-none',\n\t\tscore === 1 ? 'animate-pulse hover:animate-none focus:animate-none' : null,\n\t)\n}\n\nfunction FacePile({ isMenuOpened }: { isMenuOpened: boolean }) {\n\tconst loggedInUser = useOptionalUser()\n\tconst { users } = usePresence()\n\tconst limit = isMenuOpened ? 17 : 0\n\tconst numberOverLimit = users.length - limit\n\tif (!users.length) return null\n\tconst tiffany =\n\t\tisMenuOpened && users.length === 1 ? (\n\t\t\t<Link\n\t\t\t\ttarget=\"_blank\"\n\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\tto=\"https://www.youtube.com/watch?v=w6Q3mHyzn78\"\n\t\t\t>\n\t\t\t\t<img\n\t\t\t\t\talt=\"Tiffany Tunes\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'h-8 w-8 rounded-full border object-cover',\n\t\t\t\t\t\tgetScoreClassNames(1),\n\t\t\t\t\t)}\n\t\t\t\t\tsrc=\"/img/tiffany.png\"\n\t\t\t\t/>\n\t\t\t</Link>\n\t\t) : null\n\tconst overLimitLabel = `${numberOverLimit}${\n\t\tisMenuOpened ? ' more ' : ' '\n\t}Epic Web Dev${numberOverLimit === 1 ? '' : 's'} working now`\n\treturn (\n\t\t<div className=\"flex flex-wrap items-center gap-2\">\n\t\t\t<TooltipProvider>\n\t\t\t\t{users.slice(0, limit).map(({ user, score }) => {\n\t\t\t\t\tconst scoreClassNames = getScoreClassNames(score)\n\t\t\t\t\tconst locationLabel = getLocationLabel(user.location)\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tooltip key={user.id}>\n\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t{user.avatarUrl ? (\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\t\t\talt={user.name || 'Epic Web Dev'}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'h-8 w-8 rounded-full border object-cover',\n\t\t\t\t\t\t\t\t\t\t\tscoreClassNames,\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\tsrc={user.avatarUrl}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\t\t\taria-label={user.name || 'Epic Web Dev'}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'flex h-8 w-8 items-center justify-center rounded-full border',\n\t\t\t\t\t\t\t\t\t\t\tscoreClassNames,\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Icon name=\"User\" />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t<span className=\"flex flex-col items-center justify-center gap-1\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t{user.name || 'An EPIC Web Dev'}{' '}\n\t\t\t\t\t\t\t\t\t\t{locationLabel\n\t\t\t\t\t\t\t\t\t\t\t? ` is ${user.location?.origin?.includes('epicweb.dev') ? 'learning' : 'working'} ${\n\t\t\t\t\t\t\t\t\t\t\t\t\tscore === 1 && loggedInUser?.id !== user.id\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'with you'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t\t\t\t\t} on`\n\t\t\t\t\t\t\t\t\t\t\t: null}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{locationLabel?.line1 ? (\n\t\t\t\t\t\t\t\t\t\t<span>{locationLabel.line1}</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{locationLabel?.line2 ? (\n\t\t\t\t\t\t\t\t\t\t<span>{locationLabel.line2}</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\t{tiffany}\n\t\t\t\t{numberOverLimit > 0 ? (\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\taria-label={overLimitLabel}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t'flex items-center justify-center rounded-full border bg-accent text-xs text-accent-foreground',\n\t\t\t\t\t\t\t\t\tisMenuOpened ? 'h-8 w-8' : 'h-6 w-6',\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t'pointer-events-none overflow-hidden text-ellipsis whitespace-nowrap text-center',\n\t\t\t\t\t\t\t\t\t\tisMenuOpened ? 'w-8' : 'w-6',\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{isMenuOpened ? `+${numberOverLimit}` : numberOverLimit}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>{overLimitLabel}</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : null}\n\t\t\t</TooltipProvider>\n\t\t</div>\n\t)\n}\n\nexport default function App() {\n\tconst user = useOptionalUser()\n\n\tconst [isMenuOpened, setMenuOpened] = React.useState(false)\n\n\treturn (\n\t\t<div className=\"flex flex-col\">\n\t\t\t{user ? null : <EpicWebBanner />}\n\t\t\t<div\n\t\t\t\tclassName={cn('flex flex-grow', {\n\t\t\t\t\t'h-[calc(100vh-64px-env(safe-area-inset-top)-env(safe-area-inset-bottom))]':\n\t\t\t\t\t\t!user,\n\t\t\t\t\t'h-[calc(100vh-112px-env(safe-area-inset-top)-env(safe-area-inset-bottom))] sm:h-[calc(100vh-64px-env(safe-area-inset-top)-env(safe-area-inset-bottom))]':\n\t\t\t\t\t\tENV.EPICSHOP_DEPLOYED,\n\t\t\t\t\t'h-[calc(100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))]':\n\t\t\t\t\t\tuser,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Navigation\n\t\t\t\t\tisMenuOpened={isMenuOpened}\n\t\t\t\t\tonMenuOpenChange={setMenuOpened}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'h-full w-full max-w-[calc(100%-56px)]',\n\t\t\t\t\t\tisMenuOpened ? 'hidden md:block' : '',\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<Outlet />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nfunction getLocationLabel(location: User['location']) {\n\tif (!location) return null\n\n\tconst { exercise } = location\n\n\tconst exercisePortion = [\n\t\texercise\n\t\t\t? [exercise.exerciseNumber, exercise.stepNumber]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.map((s) => s.toString().padStart(2, '0'))\n\t\t\t\t\t.join('/')\n\t\t\t: null,\n\t\texercise?.type,\n\t]\n\t\t.filter(Boolean)\n\t\t.join(' - ')\n\treturn { line1: location.workshopTitle, line2: exercisePortion }\n}\n\nfunction EpicWebBanner() {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t'z-10 flex items-center justify-between border-b bg-gradient-to-tr from-blue-500 to-indigo-500 pl-4 text-white',\n\t\t\t\tENV.EPICSHOP_DEPLOYED ? 'h-[112px] md:h-[64px]' : 'h-16',\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"flex flex-1 flex-wrap items-center gap-4\">\n\t\t\t\t<Icon name=\"EpicWeb\" size=\"lg\" />\n\t\t\t\t<div className=\"flex flex-1 flex-wrap items-center\">\n\t\t\t\t\t<p className=\"mr-2\">\n\t\t\t\t\t\tWelcome to the{' '}\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\tto=\"https://www.epicweb.dev\"\n\t\t\t\t\t\t\tclassName=\"underline\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tEpicWeb.dev\n\t\t\t\t\t\t</Link>{' '}\n\t\t\t\t\t\tWorkshop app!\n\t\t\t\t\t</p>\n\t\t\t\t\t{ENV.EPICSHOP_DEPLOYED ? (\n\t\t\t\t\t\t<small className=\"text-sm\">\n\t\t\t\t\t\t\tThis is the deployed version.{' '}\n\t\t\t\t\t\t\t{ENV.EPICSHOP_GITHUB_ROOT ? (\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\tclassName=\"underline\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\tto={ENV.EPICSHOP_GITHUB_ROOT}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tRun locally\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t) : null}{' '}\n\t\t\t\t\t\t\tfor full experience.\n\t\t\t\t\t\t</small>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"flex h-full flex-col items-center md:flex-row\">\n\t\t\t\t<Link\n\t\t\t\t\tto=\"https://www.epicweb.dev\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\tclassName=\"flex h-full items-center justify-center space-x-1.5 px-5 text-sm font-semibold\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"drop-shadow-sm\">Join Epic Web 🆓</span>\n\t\t\t\t\t<span>↗︎</span>\n\t\t\t\t</Link>\n\t\t\t\t<Link\n\t\t\t\t\tto={\n\t\t\t\t\t\tENV.EPICSHOP_DEPLOYED ? 'https://www.epicweb.dev/login' : '/login'\n\t\t\t\t\t}\n\t\t\t\t\tclassName=\"flex h-full items-center justify-center space-x-1.5 bg-white/20 px-5 text-sm font-semibold shadow-md transition hover:bg-white/30\"\n\t\t\t\t>\n\t\t\t\t\t<Icon name=\"User\" size=\"lg\" />\n\t\t\t\t\t<span className=\"drop-shadow-sm\">Login</span>\n\t\t\t\t</Link>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nconst itemVariants = {\n\thidden: { opacity: 0, x: -20 },\n\tvisible: { opacity: 1, x: 0 },\n}\nfunction NavigationExerciseListItem({\n\texerciseNumber,\n\tchildren,\n}: {\n\texerciseNumber: number\n\tchildren: React.ReactNode\n}) {\n\tconst progressClassName = useExerciseProgressClassName(exerciseNumber)\n\treturn (\n\t\t<motion.li\n\t\t\tvariants={itemVariants}\n\t\t\t// @ts-expect-error framer-motion + latest typescript types has issues\n\t\t\tclassName={cn(\n\t\t\t\t// add gap of 3 to children, but using padding so the progress extends through the whole height\n\t\t\t\t'py-[6px] first:pt-3 last:pb-3',\n\t\t\t\tprogressClassName ? `${progressClassName} before:border-t` : null,\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"ml-2\">{children}</span>\n\t\t</motion.li>\n\t)\n}\n\nfunction NavigationExerciseStepListItem({\n\tchildren,\n\t...progressItemSearch\n}: {\n\tchildren: React.ReactNode\n} & ProgressItemSearch) {\n\tconst progressClassName = useProgressItemClassName(progressItemSearch)\n\treturn (\n\t\t<motion.li\n\t\t\tvariants={itemVariants}\n\t\t\t// @ts-expect-error framer-motion + latest typescript types has issues\n\t\t\tclassName={cn(\n\t\t\t\t// add gap of 3 to children, but using padding so the progress extends through the whole height\n\t\t\t\t'py-[6px] first:pt-3 last:pb-3',\n\t\t\t\tprogressClassName ? `${progressClassName} before:border-t` : null,\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"ml-2\">{children}</span>\n\t\t</motion.li>\n\t)\n}\n\nconst OPENED_MENU_WIDTH = 400\n\nfunction Navigation({\n\tisMenuOpened,\n\tonMenuOpenChange: setMenuOpened,\n}: {\n\tisMenuOpened: boolean\n\tonMenuOpenChange: (change: boolean) => void\n}) {\n\tconst data = useLoaderData<typeof loader>()\n\tconst user = useOptionalUser()\n\tconst nextExerciseRoute = useNextExerciseRoute()\n\tconst params = useParams()\n\tconst { users } = usePresence()\n\n\tconst exercise = data.exercises.find(\n\t\t(e) => e.exerciseNumber === Number(params.exerciseNumber),\n\t)\n\tconst app =\n\t\tparams.type === 'solution'\n\t\t\t? exercise?.solutions.find(\n\t\t\t\t\t(s) => s.stepNumber === Number(params.stepNumber),\n\t\t\t\t)\n\t\t\t: params.type === 'problem'\n\t\t\t\t? exercise?.problems.find(\n\t\t\t\t\t\t(p) => p.stepNumber === Number(params.stepNumber),\n\t\t\t\t\t)\n\t\t\t\t: null\n\n\t// container\n\tconst menuControls = useAnimationControls()\n\tconst menuVariants = {\n\t\tclose: { width: 56 },\n\t\topen: { width: OPENED_MENU_WIDTH },\n\t}\n\n\t// items\n\tconst listVariants = {\n\t\tvisible: {\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.05,\n\t\t\t\twhen: 'beforeChildren',\n\t\t\t\tstaggerChildren: 0.03,\n\t\t\t},\n\t\t},\n\t\thidden: {\n\t\t\topacity: 0,\n\t\t},\n\t}\n\tconst exNum = Number(params.exerciseNumber).toString().padStart(2, '0')\n\n\treturn (\n\t\t<nav className=\"flex border-r\">\n\t\t\t<motion.div\n\t\t\t\tinitial={isMenuOpened ? 'open' : 'close'}\n\t\t\t\tvariants={menuVariants}\n\t\t\t\tanimate={menuControls}\n\t\t\t>\n\t\t\t\t<div className=\"flex h-full flex-col items-center justify-between\">\n\t\t\t\t\t<NavToggle\n\t\t\t\t\t\ttitle={data.workshopTitle}\n\t\t\t\t\t\tmenuControls={menuControls}\n\t\t\t\t\t\tisMenuOpened={isMenuOpened}\n\t\t\t\t\t\tsetMenuOpened={setMenuOpened}\n\t\t\t\t\t/>\n\t\t\t\t\t{isMenuOpened && (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tstyle={{ width: OPENED_MENU_WIDTH }}\n\t\t\t\t\t\t\t// @ts-expect-error framer-motion + latest typescript types has issues\n\t\t\t\t\t\t\tclassName=\"flex flex-grow flex-col justify-between overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-scrollbar\"\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<motion.ul\n\t\t\t\t\t\t\t\tvariants={listVariants}\n\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\t\t// @ts-expect-error framer-motion + latest typescript types has issues\n\t\t\t\t\t\t\t\tclassName=\"flex flex-col\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{data.exercises.map(({ exerciseNumber, title, steps }) => {\n\t\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\t\tNumber(params.exerciseNumber) === exerciseNumber\n\t\t\t\t\t\t\t\t\tconst showPlayground =\n\t\t\t\t\t\t\t\t\t\t!isActive &&\n\t\t\t\t\t\t\t\t\t\tdata.playground.exerciseNumber === exerciseNumber\n\t\t\t\t\t\t\t\t\tconst exerciseNum = exerciseNumber.toString().padStart(2, '0')\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<NavigationExerciseListItem\n\t\t\t\t\t\t\t\t\t\t\tkey={exerciseNumber}\n\t\t\t\t\t\t\t\t\t\t\texerciseNumber={exerciseNumber}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\t\t\tto={`/${exerciseNum}`}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'relative whitespace-nowrap px-2 py-0.5 pr-3 text-2xl font-bold outline-none hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'after:absolute after:-bottom-2.5 after:-right-2.5 after:h-5 after:w-5 after:rotate-45 after:scale-75 after:bg-background after:content-[\"\"] hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ 'bg-foreground text-background': isActive },\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t\t\t\t\t{showPlayground ? ' 🛝' : null}\n\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t{isActive ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<motion.ul\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariants={listVariants}\n\t\t\t\t\t\t\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t// @ts-expect-error framer-motion + latest typescript types has issues\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"ml-4 mt-4 flex flex-col\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<NavigationExerciseStepListItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={exerciseNumber}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"instructions\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber={exerciseNumber}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tto={`/${exerciseNum}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'relative whitespace-nowrap px-2 py-0.5 pr-3 text-xl font-medium outline-none after:absolute after:-bottom-2.5 after:-right-2.5 after:h-5 after:w-5 after:rotate-45 after:scale-75 after:bg-background after:content-[\"\"] hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'bg-foreground text-background':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!params.stepNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tIntro\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</NavigationExerciseStepListItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{steps\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map(({ name, stepNumber, title }) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tNumber(params.stepNumber) === stepNumber\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst step = stepNumber\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.padStart(2, '0')\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst isPlayground =\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tname === data.playground.appName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<NavigationExerciseStepListItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={stepNumber}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"step\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstepNumber={stepNumber}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber={exerciseNumber}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tto={`/${exerciseNum}/${step}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'relative whitespace-nowrap px-2 py-0.5 pr-3 text-xl font-medium outline-none after:absolute after:-bottom-2.5 after:-right-2.5 after:h-5 after:w-5 after:rotate-45 after:scale-75 after:bg-background after:content-[\"\"] hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'bg-foreground text-background':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisActive,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{isPlayground\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? `${step}. ${title} 🛝`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: `${step}. ${title}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</NavigationExerciseStepListItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<NavigationExerciseStepListItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"finished\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber={exerciseNumber}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tto={`/${exerciseNum}/finished`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={({ isActive }) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclsx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'relative whitespace-nowrap px-2 py-0.5 pr-3 text-base font-medium outline-none after:absolute after:-bottom-2.5 after:-right-2.5 after:h-5 after:w-5 after:rotate-45 after:scale-75 after:bg-background after:content-[\"\"] hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'bg-foreground text-background': isActive,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t📝 Elaboration\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</NavigationExerciseStepListItem>\n\t\t\t\t\t\t\t\t\t\t\t\t</motion.ul>\n\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t</NavigationExerciseListItem>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</motion.ul>\n\t\t\t\t\t\t\t<div className=\"mt-6\">\n\t\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\t\tto=\"/finished\"\n\t\t\t\t\t\t\t\t\tclassName={({ isActive }) =>\n\t\t\t\t\t\t\t\t\t\tclsx(\n\t\t\t\t\t\t\t\t\t\t\t'relative whitespace-nowrap text-lg font-bold outline-none hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t'bg-black text-white after:absolute after:-bottom-2.5 after:-right-2.5 after:h-5 after:w-5 after:rotate-45 after:scale-75 after:bg-background after:content-[\"\"]':\n\t\t\t\t\t\t\t\t\t\t\t\t\tisActive,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t📝 Workshop Feedback\n\t\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t\t{!isMenuOpened && (\n\t\t\t\t\t\t<div className=\"flex flex-grow flex-col justify-center\">\n\t\t\t\t\t\t\t<div className=\"orientation-sideways w-full font-mono text-sm font-medium uppercase leading-none\">\n\t\t\t\t\t\t\t\t{exercise?.title ? (\n\t\t\t\t\t\t\t\t\t<Link to={`/${exNum}`}>{exercise.title}</Link>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t{exercise?.title && app?.title ? ' — ' : null}\n\t\t\t\t\t\t\t\t{app?.title ? (\n\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\tto={`/${exNum}/${app.stepNumber\n\t\t\t\t\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t\t\t\t\t.padStart(2, '0')}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{app.title}\n\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'flex w-full items-center justify-start border-t p-4 transition-[height]',\n\t\t\t\t\t\t\tisMenuOpened && users.length > 4 ? 'h-28' : 'h-14',\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={isMenuOpened ? { width: OPENED_MENU_WIDTH } : {}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<FacePile isMenuOpened={isMenuOpened} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{ENV.EPICSHOP_DEPLOYED ? null : user ? (\n\t\t\t\t\t\t<SimpleTooltip content={isMenuOpened ? null : 'Your account'}>\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tclassName=\"flex h-14 w-full items-center justify-start space-x-3 border-t px-4 py-4 text-center no-underline hover:underline\"\n\t\t\t\t\t\t\t\tto=\"/account\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{user.avatarUrl ? (\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\talt={user.name ?? user.email}\n\t\t\t\t\t\t\t\t\t\tsrc={user.avatarUrl}\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-full rounded-full\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Icon name=\"User\" className=\"flex-shrink-0\" size=\"lg\" />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{isMenuOpened ? (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t// @ts-expect-error framer-motion + latest typescript types has issues\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center whitespace-nowrap\"\n\t\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tYour Account\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<span className=\"sr-only\">Your account</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</SimpleTooltip>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{ENV.EPICSHOP_DEPLOYED ? null : user && nextExerciseRoute ? (\n\t\t\t\t\t\t<SimpleTooltip\n\t\t\t\t\t\t\tcontent={isMenuOpened ? null : 'Continue to next lesson'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tto={nextExerciseRoute}\n\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\t\t\t'flex h-14 w-full items-center space-x-3 border-t px-4 py-4 pl-[18px] no-underline hover:underline',\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstate={{ from: 'continue next lesson button' }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon name=\"FastForward\" className=\"flex-shrink-0\" size=\"md\" />\n\t\t\t\t\t\t\t\t{isMenuOpened ? (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t// @ts-expect-error framer-motion + latest typescript types has issues\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center whitespace-nowrap\"\n\t\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tContinue to next lesson\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<span className=\"sr-only\">Continue to next lesson</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</SimpleTooltip>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<div className=\"mb-4 w-full self-start border-t pl-3 pt-[15px]\">\n\t\t\t\t\t\t<ThemeSwitch />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</motion.div>\n\t\t</nav>\n\t)\n}\n\nfunction NavToggle({\n\ttitle,\n\tisMenuOpened,\n\tsetMenuOpened,\n\tmenuControls,\n}: {\n\ttitle: string\n\tisMenuOpened: boolean\n\tsetMenuOpened: (value: boolean) => void\n\tmenuControls: AnimationControls\n}) {\n\tconst path01Variants = {\n\t\topen: { d: 'M3.06061 2.99999L21.0606 21' },\n\t\tclosed: { d: 'M0 9.5L24 9.5' },\n\t}\n\tconst path02Variants = {\n\t\topen: { d: 'M3.00006 21.0607L21 3.06064' },\n\t\tmoving: { d: 'M0 14.5L24 14.5' },\n\t\tclosed: { d: 'M0 14.5L15 14.5' },\n\t}\n\tconst path01Controls = useAnimationControls()\n\tconst path02Controls = useAnimationControls()\n\n\tasync function toggleMenu() {\n\t\tvoid menuControls.start(isMenuOpened ? 'close' : 'open')\n\t\tsetMenuOpened(!isMenuOpened)\n\t\tif (isMenuOpened) {\n\t\t\tvoid path01Controls.start(path01Variants.closed)\n\t\t\tawait path02Controls.start(path02Variants.moving)\n\t\t\tvoid path02Controls.start(path02Variants.closed)\n\t\t} else {\n\t\t\tawait path02Controls.start(path02Variants.moving)\n\t\t\tvoid path01Controls.start(path01Variants.open)\n\t\t\tvoid path02Controls.start(path02Variants.open)\n\t\t}\n\t}\n\n\tconst latestToggleMenu = React.useRef(toggleMenu)\n\tReact.useEffect(() => {\n\t\tlatestToggleMenu.current = toggleMenu\n\t})\n\n\tReact.useEffect(() => {\n\t\tif (!isMenuOpened) return\n\n\t\tfunction handleKeyUp(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tvoid latestToggleMenu.current()\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keyup', handleKeyUp)\n\t\treturn () => document.removeEventListener('keyup', handleKeyUp)\n\t}, [isMenuOpened])\n\n\treturn (\n\t\t<div className=\"relative inline-flex h-14 w-full items-center justify-between overflow-hidden border-b\">\n\t\t\t<button\n\t\t\t\tclassName=\"flex h-14 w-14 items-center justify-center\"\n\t\t\t\taria-label=\"Open Navigation menu\"\n\t\t\t\tonClick={toggleMenu}\n\t\t\t>\n\t\t\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n\t\t\t\t\t<motion.path\n\t\t\t\t\t\t{...path01Variants.closed}\n\t\t\t\t\t\tanimate={path01Controls}\n\t\t\t\t\t\ttransition={{ duration: 0.2 }}\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t/>\n\t\t\t\t\t<motion.path\n\t\t\t\t\t\t{...path02Variants.closed}\n\t\t\t\t\t\tanimate={path02Controls}\n\t\t\t\t\t\ttransition={{ duration: 0.2 }}\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t{isMenuOpened && (\n\t\t\t\t<motion.p\n\t\t\t\t\ttransition={{ delay: 0.2 }}\n\t\t\t\t\tinitial={{ opacity: 0, y: 5 }}\n\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t// @ts-expect-error framer-motion + latest typescript types has issues\n\t\t\t\t\tclassName=\"absolute right-5 whitespace-nowrap font-mono text-sm uppercase\"\n\t\t\t\t>\n\t\t\t\t\t<Link to=\"/\">{title}</Link>\n\t\t\t\t</motion.p>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n"],"names":["stopAnimation","visualElement","value","setVariants","variantLabels","key","variant","setTarget","child","setValues","definition","animationControls","subscribers","controls","transitionOverride","animations","animateVisualElement","useAnimationControls","useConstant","useIsomorphicLayoutEffect","opacities","shadows","getScoreClassNames","score","opacityNumber","Math","round","length","shadowNumber","cn","FacePile","isMenuOpened","loggedInUser","useOptionalUser","users","usePresence","limit","numberOverLimit","tiffany","jsx","Link","target","rel","to","children","alt","className","src","overLimitLabel","TooltipProvider","slice","map","user","scoreClassNames","locationLabel","getLocationLabel","location","Tooltip","TooltipTrigger","asChild","avatarUrl","tabIndex","name","Icon","TooltipContent","jsxs","origin","includes","id","line1","line2","App","setMenuOpened","React","EpicWebBanner","ENV","EPICSHOP_DEPLOYED","Navigation","onMenuOpenChange","Outlet","exercise","exercisePortion","exerciseNumber","stepNumber","filter","Boolean","s","toString","padStart","join","type","workshopTitle","size","EPICSHOP_GITHUB_ROOT","itemVariants","hidden","opacity","x","visible","NavigationExerciseListItem","progressClassName","useExerciseProgressClassName","motion","li","variants","NavigationExerciseStepListItem","progressItemSearch","useProgressItemClassName","OPENED_MENU_WIDTH","data","useLoaderData","nextExerciseRoute","useNextExerciseRoute","params","useParams","exercises","find","e","Number","app","solutions","problems","p","menuControls","menuVariants","close","width","open","listVariants","transition","duration","when","staggerChildren","exNum","div","initial","animate","NavToggle","title","style","ul","steps","isActive","showPlayground","playground","exerciseNum","prefetch","clsx","step","isPlayground","appName","NavLink","SimpleTooltip","content","email","state","from","ThemeSwitch","path01Variants","d","closed","path02Variants","moving","path01Controls","path02Controls","toggleMenu","start","latestToggleMenu","current","handleKeyUp","event","document","addEventListener","removeEventListener","onClick","height","viewBox","path","stroke","strokeWidth","delay","y"],"mappings":"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","x_google_ignoreList":[0,1]}

package/build/client/assets/_layout-xu6a9He_.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as c,j as e,g as he,h as xe,d as mt}from"./index-D6ygCrVn.js";import{E as ht}from"./index-9nNr0Zqr.js";import{$ as Ne,_ as B,d as Se,e as Pe,f as xt,g as te,h as z,i as Ee,j as Te,S as K,T as bt,a as fe,b as pe,c as me,k as Ye,l as gt,m as vt,n as $t,o as jt,p as wt}from"./tooltip-Kw0lYWBI.js";import{$ as yt,a as Be,b as Nt,c as St,d as Pt,e as Et,f as Tt,g as Ct,h as Dt,i as Ot,j as Rt,k as kt,l as _t,m as Mt,n as It,o as Ft,p as Lt,A as At,q as Ut,r as Ht,R as Yt,s as Bt,t as Vt,D as zt}from"./diff-BKsbFB6w.js";import{c as ee}from"./clsx-B-dksMZM.js";import{G as Gt}from"./error-boundary-Bcric_4t.js";import{N as Kt}from"./nav-chevrons-DOYtx9XE.js";import{M as Wt,L as le,E as qt}from"./mdx-BYvGbvEr.js";import{P as Zt}from"./progress-CF9Xwfxf.js";import{I as O,u as Ce,a as De,c as ve,b as Oe}from"./misc-DNgC2Frq.js";import{s as Re}from"./progress-bar-7LK87ZMh.js";import{a as W,u as q,A as Ve,L as ae,c as ke,F as Qt}from"./components-C5xBZAiL.js";import{g as Jt}from"./seo-Bu3_n5my.js";import{L as ze}from"./loading-C9f_vBoM.js";import{u as Xt}from"./client-hints-BKxdo5Js.js";import{D as en,u as tn}from"./discord-0kv66Q6F.js";import{A as nn}from"./index-r90CY6Wk.js";import{z as m,u as _e}from"./request-info-Dyls4H67.js";import{B as Ge}from"./button-BfWwrI9B.js";import{E as rn}from"./epic-video-BwtXsHGU.js";import{u as sn}from"./use-event-source-aW6X9lN1.js";import"./user-73ocDYRe.js";import"./index-Bg9MMnnf.js";const ge="rovingFocusGroup.onEntryFocus",an={bubbles:!1,cancelable:!0},Me="RovingFocusGroup",[$e,Ke,on]=yt(Me),[cn,We]=Ne(Me,[on]),[ln,un]=cn(Me),dn=c.forwardRef((t,r)=>c.createElement($e.Provider,{scope:t.__scopeRovingFocusGroup},c.createElement($e.Slot,{scope:t.__scopeRovingFocusGroup},c.createElement(fn,B({},t,{ref:r}))))),fn=c.forwardRef((t,r)=>{const{__scopeRovingFocusGroup:s,orientation:n,loop:a=!1,dir:o,currentTabStopId:i,defaultCurrentTabStopId:u,onCurrentTabStopIdChange:l,onEntryFocus:x,...d}=t,h=c.useRef(null),b=Se(r,h),y=Be(o),[S=null,f]=Pe({prop:i,defaultProp:u,onChange:l}),[P,T]=c.useState(!1),v=xt(x),D=Ke(s),L=c.useRef(!1),[R,I]=c.useState(0);return c.useEffect(()=>{const k=h.current;if(k)return k.addEventListener(ge,v),()=>k.removeEventListener(ge,v)},[v]),c.createElement(ln,{scope:s,orientation:n,dir:y,loop:a,currentTabStopId:S,onItemFocus:c.useCallback(k=>f(k),[f]),onItemShiftTab:c.useCallback(()=>T(!0),[]),onFocusableItemAdd:c.useCallback(()=>I(k=>k+1),[]),onFocusableItemRemove:c.useCallback(()=>I(k=>k-1),[])},c.createElement(te.div,B({tabIndex:P\|\|R===0?-1:0,"data-orientation":n},d,{ref:b,style:{outline:"none",...t.style},onMouseDown:z(t.onMouseDown,()=>{L.current=!0}),onFocus:z(t.onFocus,k=>{const U=!L.current;if(k.target===k.currentTarget&&U&&!P){const Y=new CustomEvent(ge,an);if(k.currentTarget.dispatchEvent(Y),!Y.defaultPrevented){const M=D().filter(p=>p.focusable),C=M.find(p=>p.active),Z=M.find(p=>p.id===S),w=[C,Z,...M].filter(Boolean).map(p=>p.ref.current);qe(w)}}L.current=!1}),onBlur:z(t.onBlur,()=>T(!1))})))}),pn="RovingFocusGroupItem",mn=c.forwardRef((t,r)=>{const{__scopeRovingFocusGroup:s,focusable:n=!0,active:a=!1,tabStopId:o,...i}=t,u=Ee(),l=o\|\|u,x=un(pn,s),d=x.currentTabStopId===l,h=Ke(s),{onFocusableItemAdd:b,onFocusableItemRemove:y}=x;return c.useEffect(()=>{if(n)return b(),()=>y()},[n,b,y]),c.createElement($e.ItemSlot,{scope:s,id:l,focusable:n,active:a},c.createElement(te.span,B({tabIndex:d?0:-1,"data-orientation":x.orientation},i,{ref:r,onMouseDown:z(t.onMouseDown,S=>{n?x.onItemFocus(l):S.preventDefault()}),onFocus:z(t.onFocus,()=>x.onItemFocus(l)),onKeyDown:z(t.onKeyDown,S=>{if(S.key==="Tab"&&S.shiftKey){x.onItemShiftTab();return}if(S.target!==S.currentTarget)return;const f=bn(S,x.orientation,x.dir);if(f!==void 0){S.preventDefault();let T=h().filter(v=>v.focusable).map(v=>v.ref.current);if(f==="last")T.reverse();else if(f==="prev"\|\|f==="next"){f==="prev"&&T.reverse();const v=T.indexOf(S.currentTarget);T=x.loop?gn(T,v+1):T.slice(v+1)}setTimeout(()=>qe(T))}})})))}),hn={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function xn(t,r){return r!=="rtl"?t:t==="ArrowLeft"?"ArrowRight":t==="ArrowRight"?"ArrowLeft":t}function bn(t,r,s){const n=xn(t.key,s);if(!(r==="vertical"&&["ArrowLeft","ArrowRight"].includes(n))&&!(r==="horizontal"&&["ArrowUp","ArrowDown"].includes(n)))return hn[n]}function qe(t){const r=document.activeElement;for(const s of t)if(s===r\|\|(s.focus(),document.activeElement!==r))return}function gn(t,r){return t.map((s,n)=>t[(r+n)%t.length])}const vn=dn,$n=mn,Ze="Tabs",[jn,ds]=Ne(Ze,[We]),Qe=We(),[wn,Ie]=jn(Ze),yn=c.forwardRef((t,r)=>{const{__scopeTabs:s,value:n,onValueChange:a,defaultValue:o,orientation:i="horizontal",dir:u,activationMode:l="automatic",...x}=t,d=Be(u),[h,b]=Pe({prop:n,onChange:a,defaultProp:o});return c.createElement(wn,{scope:s,baseId:Ee(),value:h,onValueChange:b,orientation:i,dir:d,activationMode:l},c.createElement(te.div,B({dir:d,"data-orientation":i},x,{ref:r})))}),Nn="TabsList",Sn=c.forwardRef((t,r)=>{const{__scopeTabs:s,loop:n=!0,...a}=t,o=Ie(Nn,s),i=Qe(s);return c.createElement(vn,B({asChild:!0},i,{orientation:o.orientation,dir:o.dir,loop:n}),c.createElement(te.div,B({role:"tablist","aria-orientation":o.orientation},a,{ref:r})))}),Pn="TabsTrigger",En=c.forwardRef((t,r)=>{const{__scopeTabs:s,value:n,disabled:a=!1,...o}=t,i=Ie(Pn,s),u=Qe(s),l=Je(i.baseId,n),x=Xe(i.baseId,n),d=n===i.value;return c.createElement($n,B({asChild:!0},u,{focusable:!a,active:d}),c.createElement(te.button,B({type:"button",role:"tab","aria-selected":d,"aria-controls":x,"data-state":d?"active":"inactive","data-disabled":a?"":void 0,disabled:a,id:l},o,{ref:r,onMouseDown:z(t.onMouseDown,h=>{!a&&h.button===0&&h.ctrlKey===!1?i.onValueChange(n):h.preventDefault()}),onKeyDown:z(t.onKeyDown,h=>{[" ","Enter"].includes(h.key)&&i.onValueChange(n)}),onFocus:z(t.onFocus,()=>{const h=i.activationMode!=="manual";!d&&!a&&h&&i.onValueChange(n)})})))}),Tn="TabsContent",Cn=c.forwardRef((t,r)=>{const{__scopeTabs:s,value:n,forceMount:a,children:o,...i}=t,u=Ie(Tn,s),l=Je(u.baseId,n),x=Xe(u.baseId,n),d=n===u.value,h=c.useRef(d);return c.useEffect(()=>{const b=requestAnimationFrame(()=>h.current=!1);return()=>cancelAnimationFrame(b)},[]),c.createElement(Te,{present:a\|\|d},({present:b})=>c.createElement(te.div,B({"data-state":d?"active":"inactive","data-orientation":u.orientation,role:"tabpanel","aria-labelledby":l,hidden:!b,id:x,tabIndex:0},i,{ref:r,style:{...t.style,animationDuration:h.current?"0s":void 0}}),b&&o))});function Je(t,r){return`${t}-trigger-${r}`}function Xe(t,r){return`${t}-content-${r}`}const Dn=yn,On=Sn,Rn=En,se=Cn;function je({appName:t,reset:r=!1,tooltipText:s,...n}){var i;const a=W(),o=e.jsx("button",{type:"submit",...n,className:ee(n.className,a.state!=="idle"?"cursor-progress":null,((i=a.data)==null?void 0:i.status)==="error"?"cursor-not-allowed":null)});return e.jsxs(a.Form,{action:"/set-playground",method:"POST",className:"inline-flex items-center justify-center",children:[e.jsx("input",{type:"hidden",name:"appName",value:t}),r?e.jsx("input",{type:"hidden",name:"reset",value:"true"}):null,Re,s?e.jsx(K,{content:s,children:o}):o]})}function kn({playgroundAppName:t,allApps:r}){var n;const s=W();return e.jsxs(Nt,{name:"appName",value:t,onValueChange:a=>{s.submit({appName:a},{method:"POST",action:"/set-playground"})},children:[e.jsxs(St,{"aria-label":"Select app for playground",className:ee("flex h-full w-full items-center justify-between text-left radix-placeholder:text-gray-500 focus-visible:outline-none",s.state!=="idle"?"cursor-progress":null,((n=s.data)==null?void 0:n.status)==="error"?"cursor-not-allowed":null),children:[e.jsx("span",{className:"w-80 flex-1 overflow-hidden text-ellipsis whitespace-nowrap scrollbar-thin scrollbar-thumb-scrollbar",children:e.jsx(Pt,{placeholder:"Select current app",className:"inline-block w-40 text-ellipsis"})}),e.jsx(Et,{children:e.jsx(O,{name:"TriangleDownSmall"})})]}),e.jsx(Tt,{children:e.jsxs(Ct,{position:"popper",align:"start",className:"z-20 max-h-[50vh] bg-black text-white lg:max-h-[70vh]",children:[e.jsx(Dt,{className:"flex h-5 cursor-default items-center justify-center ",children:e.jsx(O,{name:"ChevronUp"})}),e.jsx(Ot,{className:"p-3",children:e.jsxs(Rt,{children:[e.jsx(kt,{className:"px-5 pb-3 font-mono uppercase",children:"App"}),r.filter(a=>a.name!=="playground").map(a=>e.jsx(_n,{value:a.name,children:a.displayName},a.name))]})}),e.jsx(_t,{className:"flex h-5 cursor-default items-center justify-center ",children:e.jsx(O,{name:"ChevronDown"})})]})})]})}function _n({value:t,children:r}){return e.jsxs(Mt,{value:t,className:"relative flex cursor-pointer select-none items-center rounded px-10 py-2 leading-none opacity-80 radix-disabled:text-red-500 radix-highlighted:opacity-100 radix-highlighted:outline-none radix-state-checked:opacity-100",children:[e.jsx(It,{children:r}),e.jsx(Ft,{className:"absolute left-0 inline-flex w-[25px] items-center justify-center",children:e.jsx(O,{name:"CheckSmall"})})]})}function Fe({appName:t}){return ENV.EPICSHOP_DEPLOYED?null:e.jsx(je,{appName:t,tooltipText:"Playground is not set to the right app. Click to set Playground.",children:e.jsxs("span",{className:"flex items-center justify-center gap-1 text-foreground-danger hover:underline",children:[e.jsx(O,{name:"Unlinked",className:"animate-ping"})," ",e.jsx("span",{className:"uppercase",children:"Set to Playground"})]})})}var et={exports:{}};(function(t,r){(function(s,n){t.exports=n()})(xe,function(){var s=1e3,n=6e4,a=36e5,o="millisecond",i="second",u="minute",l="hour",x="day",d="week",h="month",b="quarter",y="year",S="date",f="Invalid Date",P=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s](\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,T=/\[([^\]]+)]\|Y{1,4}\|M{1,4}\|D{1,2}\|d{1,4}\|H{1,2}\|h{1,2}\|a\|A\|m{1,2}\|s{1,2}\|Z{1,2}\|SSS/g,v={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(w){var p=["th","st","nd","rd"],g=w%100;return"["+w+(p[(g-20)%10]\|\|p[g]\|\|p[0])+"]"}},D=function(w,p,g){var N=String(w);return!N\|\|N.length>=p?w:""+Array(p+1-N.length).join(g)+w},L={s:D,z:function(w){var p=-w.utcOffset(),g=Math.abs(p),N=Math.floor(g/60),$=g%60;return(p<=0?"+":"-")+D(N,2,"0")+":"+D($,2,"0")},m:function w(p,g){if(p.date()<g.date())return-w(g,p);var N=12(g.year()-p.year())+(g.month()-p.month()),$=p.clone().add(N,h),E=g-$<0,j=p.clone().add(N+(E?-1:1),h);return+(-(N+(g-$)/(E?$-j:j-$))\|\|0)},a:function(w){return w<0?Math.ceil(w)\|\|0:Math.floor(w)},p:function(w){return{M:h,y,w:d,d:x,D:S,h:l,m:u,s:i,ms:o,Q:b}[w]\|\|String(w\|\|"").toLowerCase().replace(/s$/,"")},u:function(w){return w===void 0}},R="en",I={};I[R]=v;var k="$isDayjsObject",U=function(w){return w instanceof Z\|\|!(!w\|\|!w[k])},Y=function w(p,g,N){var $;if(!p)return R;if(typeof p=="string"){var E=p.toLowerCase();I[E]&&($=E),g&&(I[E]=g,$=E);var j=p.split("-");if(!$&&j.length>1)return w(j[0])}else{var _=p.name;I[_]=p,$=_}return!N&&$&&(R=$),$\|\|!N&&R},M=function(w,p){if(U(w))return w.clone();var g=typeof p=="object"?p:{};return g.date=w,g.args=arguments,new Z(g)},C=L;C.l=Y,C.i=U,C.w=function(w,p){return M(w,{locale:p.$L,utc:p.$u,x:p.$x,$offset:p.$offset})};var Z=function(){function w(g){this.$L=Y(g.locale,null,!0),this.parse(g),this.$x=this.$x\|\|g.x\|\|{},this[k]=!0}var p=w.prototype;return p.parse=function(g){this.$d=function(N){var $=N.date,E=N.utc;if($===null)return new Date(NaN);if(C.u($))return new Date;if($ instanceof Date)return new Date($);if(typeof $=="string"&&!/Z$/i.test($)){var j=$.match(P);if(j){var _=j[2]-1\|\|0,A=(j[7]\|\|"0").substring(0,3);return E?new Date(Date.UTC(j[1],_,j[3]\|\|1,j[4]\|\|0,j[5]\|\|0,j[6]\|\|0,A)):new Date(j[1],_,j[3]\|\|1,j[4]\|\|0,j[5]\|\|0,j[6]\|\|0,A)}}return new Date($)}(g),this.init()},p.init=function(){var g=this.$d;this.$y=g.getFullYear(),this.$M=g.getMonth(),this.$D=g.getDate(),this.$W=g.getDay(),this.$H=g.getHours(),this.$m=g.getMinutes(),this.$s=g.getSeconds(),this.$ms=g.getMilliseconds()},p.$utils=function(){return C},p.isValid=function(){return this.$d.toString()!==f},p.isSame=function(g,N){var $=M(g);return this.startOf(N)<=$&&$<=this.endOf(N)},p.isAfter=function(g,N){return M(g)<this.startOf(N)},p.isBefore=function(g,N){return this.endOf(N)<M(g)},p.$g=function(g,N,$){return C.u(g)?this[N]:this.set($,g)},p.unix=function(){return Math.floor(this.valueOf()/1e3)},p.valueOf=function(){return this.$d.getTime()},p.startOf=function(g,N){var $=this,E=!!C.u(N)\|\|N,j=C.p(g),_=function(X,V){var Q=C.w($.$u?Date.UTC($.$y,V,X):new Date($.$y,V,X),$);return E?Q:Q.endOf(x)},A=function(X,V){return C.w($.toDate()[X].apply($.toDate("s"),(E?[0,0,0,0]:[23,59,59,999]).slice(V)),$)},F=this.$W,H=this.$M,G=this.$D,re="set"+(this.$u?"UTC":"");switch(j){case y:return E?_(1,0):_(31,11);case h:return E?_(1,H):_(0,H+1);case d:var J=this.$locale().weekStart\|\|0,ie=(F<J?F+7:F)-J;return _(E?G-ie:G+(6-ie),H);case x:case S:return A(re+"Hours",0);case l:return A(re+"Minutes",1);case u:return A(re+"Seconds",2);case i:return A(re+"Milliseconds",3);default:return this.clone()}},p.endOf=function(g){return this.startOf(g,!1)},p.$set=function(g,N){var $,E=C.p(g),j="set"+(this.$u?"UTC":""),_=($={},$[x]=j+"Date",$[S]=j+"Date",$[h]=j+"Month",$[y]=j+"FullYear",$[l]=j+"Hours",$[u]=j+"Minutes",$[i]=j+"Seconds",$[o]=j+"Milliseconds",$)[E],A=E===x?this.$D+(N-this.$W):N;if(E===h\|\|E===y){var F=this.clone().set(S,1);F.$d[_](A),F.init(),this.$d=F.set(S,Math.min(this.$D,F.daysInMonth())).$d}else _&&this.$d[_](A);return this.init(),this},p.set=function(g,N){return this.clone().$set(g,N)},p.get=function(g){return this[C.p(g)]()},p.add=function(g,N){var $,E=this;g=Number(g);var j=C.p(N),_=function(H){var G=M(E);return C.w(G.date(G.date()+Math.round(Hg)),E)};if(j===h)return this.set(h,this.$M+g);if(j===y)return this.set(y,this.$y+g);if(j===x)return _(1);if(j===d)return _(7);var A=($={},$[u]=n,$[l]=a,$[i]=s,$)[j]\|\|1,F=this.$d.getTime()+gA;return C.w(F,this)},p.subtract=function(g,N){return this.add(-1g,N)},p.format=function(g){var N=this,$=this.$locale();if(!this.isValid())return $.invalidDate\|\|f;var E=g\|\|"YYYY-MM-DDTHH:mm:ssZ",j=C.z(this),_=this.$H,A=this.$m,F=this.$M,H=$.weekdays,G=$.months,re=$.meridiem,J=function(V,Q,ce,de){return V&&(V[Q]\|\|V(N,E))\|\|ce[Q].slice(0,de)},ie=function(V){return C.s(_%12\|\|12,V,"0")},X=re\|\|function(V,Q,ce){var de=V<12?"AM":"PM";return ce?de.toLowerCase():de};return E.replace(T,function(V,Q){return Q\|\|function(ce){switch(ce){case"YY":return String(N.$y).slice(-2);case"YYYY":return C.s(N.$y,4,"0");case"M":return F+1;case"MM":return C.s(F+1,2,"0");case"MMM":return J($.monthsShort,F,G,3);case"MMMM":return J(G,F);case"D":return N.$D;case"DD":return C.s(N.$D,2,"0");case"d":return String(N.$W);case"dd":return J($.weekdaysMin,N.$W,H,2);case"ddd":return J($.weekdaysShort,N.$W,H,3);case"dddd":return H[N.$W];case"H":return String(_);case"HH":return C.s(_,2,"0");case"h":return ie(1);case"hh":return ie(2);case"a":return X(_,A,!0);case"A":return X(_,A,!1);case"m":return String(A);case"mm":return C.s(A,2,"0");case"s":return String(N.$s);case"ss":return C.s(N.$s,2,"0");case"SSS":return C.s(N.$ms,3,"0");case"Z":return j}return null}(V)\|\|j.replace(":","")})},p.utcOffset=function(){return 15-Math.round(this.$d.getTimezoneOffset()/15)},p.diff=function(g,N,$){var E,j=this,_=C.p(N),A=M(g),F=(A.utcOffset()-this.utcOffset())n,H=this-A,G=function(){return C.m(j,A)};switch(_){case y:E=G()/12;break;case h:E=G();break;case b:E=G()/3;break;case d:E=(H-F)/6048e5;break;case x:E=(H-F)/864e5;break;case l:E=H/a;break;case u:E=H/n;break;case i:E=H/s;break;default:E=H}return $?E:C.a(E)},p.daysInMonth=function(){return this.endOf(h).$D},p.$locale=function(){return I[this.$L]},p.locale=function(g,N){if(!g)return this.$L;var $=this.clone(),E=Y(g,N,!0);return E&&($.$L=E),$},p.clone=function(){return C.w(this.$d,this)},p.toDate=function(){return new Date(this.valueOf())},p.toJSON=function(){return this.isValid()?this.toISOString():null},p.toISOString=function(){return this.$d.toISOString()},p.toString=function(){return this.$d.toUTCString()},w}(),ne=Z.prototype;return M.prototype=ne,[["$ms",o],["$s",i],["$m",u],["$H",l],["$W",x],["$M",h],["$y",y],["$D",S]].forEach(function(w){ne[w[1]]=function(p){return this.$g(p,w[0],w[1])}}),M.extend=function(w,p){return w.$i\|\|(w(p,Z,M),w.$i=!0),M},M.locale=Y,M.isDayjs=U,M.unix=function(w){return M(1e3w)},M.en=I[R],M.Ls=I,M.p={},M})})(et);var Mn=et.exports;const be=he(Mn);var tt={exports:{}};(function(t,r){(function(s,n){t.exports=n()})(xe,function(){return function(s,n,a){s=s\|\|{};var o=n.prototype,i={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function u(x,d,h,b){return o.fromToBase(x,d,h,b)}a.en.relativeTime=i,o.fromToBase=function(x,d,h,b,y){for(var S,f,P,T=h.$locale().relativeTime\|\|i,v=s.thresholds\|\|[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],D=v.length,L=0;L<D;L+=1){var R=v[L];R.d&&(S=b?a(x).diff(h,R.d,!0):h.diff(x,R.d,!0));var I=(s.rounding\|\|Math.round)(Math.abs(S));if(P=S>0,I<=R.r\|\|!R.r){I<=1&&L>0&&(R=v[L-1]);var k=T[R.l];y&&(I=y(""+I)),f=typeof k=="string"?k.replace("%d",I):k(I,d,R.l,P);break}}if(d)return f;var U=P?T.future:T.past;return typeof U=="function"?U(f):U.replace("%s",f)},o.to=function(x,d){return u(x,d,this,!0)},o.from=function(x,d){return u(x,d,this)};var l=function(x){return x.$u?a.utc():a()};o.toNow=function(x){return this.to(l(this),x)},o.fromNow=function(x){return this.from(l(this),x)}}})})(tt);var In=tt.exports;const Fn=he(In);var nt={exports:{}};(function(t,r){(function(s,n){t.exports=n()})(xe,function(){var s={year:0,month:1,day:2,hour:3,minute:4,second:5},n={};return function(a,o,i){var u,l=function(b,y,S){S===void 0&&(S={});var f=new Date(b),P=function(T,v){v===void 0&&(v={});var D=v.timeZoneName\|\|"short",L=T+"\|"+D,R=n[L];return R\|\|(R=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:T,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:D}),n[L]=R),R}(y,S);return P.formatToParts(f)},x=function(b,y){for(var S=l(b,y),f=[],P=0;P<S.length;P+=1){var T=S[P],v=T.type,D=T.value,L=s[v];L>=0&&(f[L]=parseInt(D,10))}var R=f[3],I=R===24?0:R,k=f[0]+"-"+f[1]+"-"+f[2]+" "+I+":"+f[4]+":"+f[5]+":000",U=+b;return(i.utc(k).valueOf()-(U-=U%1e3))/6e4},d=o.prototype;d.tz=function(b,y){b===void 0&&(b=u);var S=this.utcOffset(),f=this.toDate(),P=f.toLocaleString("en-US",{timeZone:b}),T=Math.round((f-new Date(P))/1e3/60),v=i(P,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(15-Math.round(f.getTimezoneOffset()/15)-T,!0);if(y){var D=v.utcOffset();v=v.add(S-D,"minute")}return v.$x.$timezone=b,v},d.offsetName=function(b){var y=this.$x.$timezone\|\|i.tz.guess(),S=l(this.valueOf(),y,{timeZoneName:b}).find(function(f){return f.type.toLowerCase()==="timezonename"});return S&&S.value};var h=d.startOf;d.startOf=function(b,y){if(!this.$x\|\|!this.$x.$timezone)return h.call(this,b,y);var S=i(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return h.call(S,b,y).tz(this.$x.$timezone,!0)},i.tz=function(b,y,S){var f=S&&y,P=S\|\|y\|\|u,T=x(+i(),P);if(typeof b!="string")return i(b).tz(P);var v=function(I,k,U){var Y=I-60k1e3,M=x(Y,U);if(k===M)return[Y,k];var C=x(Y-=60(M-k)1e3,U);return M===C?[Y,M]:[I-60Math.min(M,C)1e3,Math.max(M,C)]}(i.utc(b,f).valueOf(),T,P),D=v[0],L=v[1],R=i(D).utcOffset(L);return R.$x.$timezone=P,R},i.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},i.tz.setDefault=function(b){u=b}}})})(nt);var Ln=nt.exports;const An=he(Ln);var rt={exports:{}};(function(t,r){(function(s,n){t.exports=n()})(xe,function(){var s="minute",n=/[+-]\d\d(?::?\d\d)?/g,a=/([+-]\|\d\d)/g;return function(o,i,u){var l=i.prototype;u.utc=function(f){var P={date:f,utc:!0,args:arguments};return new i(P)},l.utc=function(f){var P=u(this.toDate(),{locale:this.$L,utc:!0});return f?P.add(this.utcOffset(),s):P},l.local=function(){return u(this.toDate(),{locale:this.$L,utc:!1})};var x=l.parse;l.parse=function(f){f.utc&&(this.$u=!0),this.$utils().u(f.$offset)\|\|(this.$offset=f.$offset),x.call(this,f)};var d=l.init;l.init=function(){if(this.$u){var f=this.$d;this.$y=f.getUTCFullYear(),this.$M=f.getUTCMonth(),this.$D=f.getUTCDate(),this.$W=f.getUTCDay(),this.$H=f.getUTCHours(),this.$m=f.getUTCMinutes(),this.$s=f.getUTCSeconds(),this.$ms=f.getUTCMilliseconds()}else d.call(this)};var h=l.utcOffset;l.utcOffset=function(f,P){var T=this.$utils().u;if(T(f))return this.$u?0:T(this.$offset)?h.call(this):this.$offset;if(typeof f=="string"&&(f=function(R){R===void 0&&(R="");var I=R.match(n);if(!I)return null;var k=(""+I[0]).match(a)\|\|["-",0,0],U=k[0],Y=60+k[1]+ +k[2];return Y===0?0:U==="+"?Y:-Y}(f),f===null))return this;var v=Math.abs(f)<=16?60f:f,D=this;if(P)return D.$offset=v,D.$u=f===0,D;if(f!==0){var L=this.$u?this.toDate().getTimezoneOffset():-1this.utcOffset();(D=this.local().add(v+L,s)).$offset=v,D.$x.$localOffset=L}else D=this.utc();return D};var b=l.format;l.format=function(f){var P=f\|\|(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return b.call(this,P)},l.valueOf=function(){var f=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset\|\|this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4f},l.isUTC=function(){return!!this.$u},l.toISOString=function(){return this.toDate().toISOString()},l.toString=function(){return this.toDate().toUTCString()};var y=l.toDate;l.toDate=function(f){return f==="s"&&this.$offset?u(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():y.call(this)};var S=l.diff;l.diff=function(f,P,T){if(f&&this.$u===f.$u)return S.call(this,f,P,T);var v=this.local(),D=u(f).local();return S.call(v,D,P,T)}}})})(rt);var Un=rt.exports;const Hn=he(Un);be.extend(Hn);be.extend(An);be.extend(Fn);function Yn(){const t=q();return e.jsxs("div",{className:"flex h-full w-full flex-col gap-4 pt-4",children:[e.jsx("div",{className:"text-center",children:e.jsx(en,{discordAuthUrl:t.discordAuthUrl})}),e.jsx("div",{className:"flex-1 overflow-y-scroll bg-accent pb-4 scrollbar-thin scrollbar-thumb-scrollbar",children:e.jsx(Bn,{})})]})}function Bn(){const t=q(),r=tn({discordAuthUrl:t.discordAuthUrl}),s=Ce();return e.jsxs("div",{className:"flex h-full flex-col items-center justify-between",children:[e.jsx(c.Suspense,{fallback:e.jsx("div",{className:"flex h-full w-full flex-col items-center justify-center",children:e.jsx(ze,{children:"Loading Discord Posts"})}),children:e.jsx(Ve,{resolve:t.discordPostsPromise,errorElement:e.jsx("div",{className:"text-red-500",children:"There was a problem loading the discord posts"}),children:n=>e.jsx("ul",{className:"flex w-full flex-col gap-4 p-3 xl:p-12",children:n.map(a=>e.jsx("li",{className:"rounded-xl border bg-background transition-all duration-200 focus-within:-translate-y-1 focus-within:shadow-lg hover:-translate-y-1 hover:shadow-lg",children:e.jsx(Vn,{thread:a})},a.id))})})}),e.jsx("div",{children:e.jsxs(ae,{to:s&&!r.includes("oauth")?r.replace(/^https/,"discord"):r,target:r.includes("oauth")?void 0:"_blank",rel:"noreferrer noopener",onClick:s?n=>{n.preventDefault(),window.open(n.currentTarget.href,"_blank","noreferrer noopener")}:void 0,className:"flex items-center gap-2 p-2 text-xl hover:underline",children:["Create Post ",e.jsx(O,{name:"ExternalLink"})]})})]})}function Vn({thread:t}){const r=t.reactions.filter(n=>n.count),s=Xt();return e.jsx("div",{children:e.jsxs("div",{className:"flex flex-col gap-2 p-4",children:[e.jsxs("div",{className:"flex gap-4",children:[e.jsxs("div",{className:"flex flex-col gap-1",children:[t.tags.length?e.jsx("div",{className:"flex gap-2",children:t.tags.map(n=>e.jsxs("div",{className:"flex items-center justify-center gap-1 rounded-full bg-accent px-2 py-1 text-sm",children:[e.jsx("span",{className:"h-3 w-3 leading-3",children:e.jsx(Ue,{name:n.emojiName,url:n.emojiUrl})}),e.jsx("span",{children:n.name})]},n.name))}):null,e.jsx("strong",{className:"text-xl font-bold",children:t.name}),e.jsxs("div",{className:"flex items-start gap-1",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[t.authorAvatarUrl?e.jsx("img",{src:t.authorAvatarUrl,alt:"",className:"h-6 w-6 rounded-full"}):null,e.jsxs("span",{children:[e.jsx("span",{className:"font-bold",style:t.authorHexAccentColor?{color:t.authorHexAccentColor}:{},children:t.authorDisplayName}),":"," "]})]}),e.jsx("span",{className:"flex-1 overflow-ellipsis text-muted-foreground",children:t.messagePreview})]})]}),t.previewImageUrl?e.jsx("img",{src:t.previewImageUrl,alt:"",className:"h-28 w-28 rounded-lg object-cover"}):null]}),e.jsxs("div",{className:"flex justify-between",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{children:r.length?e.jsx("ul",{className:"flex items-center gap-2",children:r.map((n,a)=>e.jsxs("li",{className:"flex items-center gap-1 rounded-md border border-blue-600 bg-blue-500/20 px-[5px] py-[0.5px] text-sm",children:[e.jsx("span",{className:"h-3 w-3 leading-3",children:e.jsx(Ue,{name:n.emojiName,url:n.emojiUrl})}),e.jsx("span",{children:n.count})]},a))}):null}),e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsxs("span",{className:"inline-flex items-center gap-1",children:[e.jsx(O,{name:"Chat"})," ",t.messageCount]}),` · ${be(t.lastUpdated).tz(s.timeZone).fromNow()}`]})]}),e.jsxs("span",{className:"flex items-center gap-4",children:[e.jsx("a",{href:t.link.replace(/^https/,"discord"),children:e.jsx(O,{name:"Discord"})}),e.jsx("a",{href:t.link,target:"_blank",rel:"noreferrer noopener",children:e.jsx(O,{name:"ExternalLink"})})]})]})]})})}function Ue({name:t,url:r}){return r?e.jsx("img",{src:r,alt:t,className:"h-full w-full"}):t\|\|null}function st({playgroundAppName:t,problemAppName:r,isUpToDate:s,allApps:n,children:a}){const o=t===r,i=o&&s?e.jsx(O,{size:"xl",name:"Linked"}):e.jsx(O,{size:"xl",name:"Unlinked",className:"animate-pulse text-foreground-danger"});let u="Click to reset Playground.";return s\|\|(u="Playground is out of date. Click to reset Playground."),o\|\|(u="Playground is not set to the right app. Click to set Playground."),e.jsxs("div",{className:"flex h-full w-full flex-col justify-between",children:[e.jsxs("div",{className:"flex h-14 flex-shrink-0 items-center justify-start gap-2 border-b px-3",children:[e.jsx("div",{className:"display-alt-up",children:r?e.jsx(je,{appName:r,tooltipText:u,children:i}):e.jsx(K,{content:"No problem app available for this step",children:e.jsx("div",{children:e.jsx(O,{name:"Question"})})})}),e.jsx("div",{className:"display-alt-down",children:t?e.jsx(je,{appName:t,reset:!0,tooltipText:"Reset Playground",children:e.jsx("div",{className:"flex h-7 w-7 items-center justify-center",children:e.jsx(O,{name:"Refresh"})})}):e.jsx("div",{className:"h-7 w-7"})}),e.jsx(kn,{allApps:n,playgroundAppName:t})]}),e.jsx("div",{className:"flex h-full flex-1 flex-grow items-center justify-center",children:a})]})}function zn({name:t}){var o;const r=W(),s=(o=r.formData)==null?void 0:o.get("intent"),n=s==="stop"?"Stopping App":s==="restart"?"Restarting App":null,a=Ce();return e.jsxs(r.Form,{method:"POST",action:"/start",children:[Re,e.jsx("input",{type:"hidden",name:"name",value:t}),e.jsx("button",{type:"submit",name:"intent",value:a?"restart":"stop",className:"h-full border-r px-3 py-4 font-mono text-xs uppercase leading-none",children:n\|\|(a?"Restart App":"Stop App")})]})}function at({port:t}){const r=W();return e.jsxs(r.Form,{method:"POST",action:"/start",children:[e.jsx("input",{type:"hidden",name:"port",value:t}),e.jsx(Ge,{varient:"mono",type:"submit",name:"intent",value:"stop-port",children:r.state==="idle"?"Stop Port":"Stopping Port"})]})}function Gn({name:t}){var s;const r=W();return((s=r.data)==null?void 0:s.status)==="app-not-started"?r.data.error==="port-unavailable"?e.jsxs("div",{children:["The port is unavailable. Would you like to stop whatever is running on that port and try again?",e.jsx(at,{port:r.data.port})]}):e.jsx("div",{children:"An unknown error has happened."}):e.jsxs(r.Form,{method:"POST",action:"/start",children:[e.jsx("input",{type:"hidden",name:"name",value:t}),r.state==="idle"?e.jsx(Ge,{type:"submit",name:"intent",value:"start",varient:"mono",children:"Start App"}):e.jsx("div",{children:e.jsx(ze,{children:"Starting App"})})]})}const Kn=m.intersection(m.object({type:m.literal("epicshop:history-call")}),m.union([m.object({method:m.literal("pushState"),args:m.union([m.tuple([m.object({}).passthrough(),m.unknown()]),m.tuple([m.object({}).passthrough(),m.unknown(),m.string()])])}),m.object({method:m.literal("replaceState"),args:m.union([m.tuple([m.object({}).passthrough(),m.unknown()]),m.tuple([m.object({}).passthrough(),m.unknown(),m.string()])])}),m.object({method:m.literal("go"),args:m.tuple([m.number().optional()])}),m.object({method:m.literal("forward"),args:m.tuple([])}),m.object({method:m.literal("back"),args:m.tuple([])}),m.object({method:m.literal("popstate"),pathname:m.string(),delta:m.number()})])),Wn=m.object({type:m.literal("epicshop:loaded"),url:m.string()}),qn=m.union([Kn,Wn]);function He(t,r,s){return Math.min(Math.max(t+r,0),s)}const Zn=c.forwardRef(Qn);function Qn({name:t,port:r,portIsAvailable:s,isRunning:n,baseUrl:a,id:o,initialRoute:i},u){const l=_e();return n?e.jsx(Jn,{baseUrl:a,id:o,name:t,ref:u,initialRoute:i}):s===!1?e.jsxs("div",{className:"flex flex-col items-center justify-center",children:[e.jsxs("p",{className:"max-w-xs pb-5 text-center",role:"status",children:["The port for this app is unavailable. It could be that you're running it ",e.jsx("a",{href:De({domain:l.domain,port:r}),className:"underline",children:"elsewhere"}),"?"]}),e.jsx(at,{port:r})]}):e.jsx(Gn,{name:t})}const Jn=c.forwardRef(Xn);function Xn({baseUrl:t,id:r,name:s,initialRoute:n},a){const[o,i]=ke(),u=o.get("pathname")??n,[l,x]=c.useState(0),d=r+l,h=c.useRef("new"),b=c.useRef(null),[y,S]=c.useState({history:[u],index:0}),[f,P]=c.useState(u),T=c.useRef(null),v=new URL(u,t),D=c.useRef(v);c.useEffect(()=>{D.current=v});const[L,R]=c.useState(v),I=c.useRef(r);I.current!==r&&(I.current=r,R(D.current)),c.useEffect(()=>{I.current=r}),c.useEffect(()=>{function w(p){var E;if(p.source!==((E=T.current)==null?void 0:E.contentWindow))return;const g=qn.safeParse(p.data,{path:["messageEvent","data"]});if(!g.success)return;const{data:N}=g;if(N.type==="epicshop:loaded"){S(j=>{const _=A=>He(j.index,A,j.history.length-1);if(h.current==="back")return{...j,index:_(-1)};if(h.current==="forward")return{...j,index:_(1)};if(h.current==="new"){const A=j.history[j.index],F=new URL(N.url).pathname;if(A===F)return j;const H=[...j.history.slice(0,j.index+1),F];return{history:H,index:H.length-1}}else throw new Error("Unexpected lastDirectionRef value")});return}const{method:$}=N;S(j=>{const _=F=>He(j.index,F,j.history.length-1),A=j.history[j.index];switch($){case"popstate":return{...j,index:_(N.delta)};case"forward":return{...j,index:_(1)};case"back":return{...j,index:_(-1)};case"pushState":{const F=N.args[2]??A,H=[...j.history.slice(0,j.index+1),F].filter(Boolean);return{...j,history:H,index:H.length-1}}case"replaceState":{const F=N.args[2]??A;return{...j,history:[...j.history.slice(0,j.index),F,...j.history.slice(j.index+1)].filter(Boolean)}}case"go":{const[F=0]=N.args;return{...j,index:_(F)}}}})}return window.addEventListener("message",w),()=>{window.removeEventListener("message",w)}},[]);const k=c.useRef(i);c.useEffect(()=>{k.current=i},[i]);const U=y.history[y.index];c.useEffect(()=>{if(!U)return;P(U);const w=new URLSearchParams(window.location.search);U==="/"?w.delete("pathname"):w.set("pathname",U),`?${w.toString()}`!==window.location.search&&k.current(w,{replace:!0})},[U]);const Y=(...w)=>{var g,N;const p=w[0];typeof p=="number"?h.current=p>0?"forward":"back":h.current="new",b.current&&clearTimeout(b.current),b.current=setTimeout(()=>{h.current="new"},100),(N=(g=T.current)==null?void 0:g.contentWindow)==null\|\|N.postMessage({type:"epicshop:navigate-call",params:w},"")};function M(w=f){P(w);const p=y.history[y.index];Y(w,{replace:p===w})}c.useImperativeHandle(a,()=>({handleExtrnalNavigation:M}));const C=y.index===y.history.length-1,Z=y.index<=0,ne=[];for(const[w,p]of o.entries())w!=="pathname"&&ne.push(e.jsx("input",{type:"hidden",name:w,value:p},w));return e.jsx(bt,{children:e.jsxs("div",{className:"flex h-full flex-grow flex-col",children:[e.jsxs("div",{className:"flex items-center justify-between border-b pl-1.5",children:[e.jsxs("div",{className:"mr-2 flex items-center justify-center gap-2 px-1",children:[e.jsxs(fe,{children:[e.jsx(pe,{asChild:!0,children:e.jsx("button",{type:"button",className:"flex aspect-square h-full w-full items-center justify-center p-1 transition disabled:opacity-40",disabled:Z,onClick:()=>Y(-1),children:e.jsx(O,{name:"ArrowLeft","aria-hidden":"true"})})}),e.jsx(me,{children:"Go back"})]}),e.jsxs(fe,{children:[e.jsx(pe,{asChild:!0,children:e.jsx("button",{type:"button",className:"flex aspect-square h-full w-full items-center justify-center p-1 transition disabled:opacity-40",disabled:C,onClick:()=>Y(1),children:e.jsx(O,{name:"ArrowRight","aria-hidden":"true"})})}),e.jsx(me,{children:"Go forward"})]}),e.jsxs(fe,{children:[e.jsx(pe,{asChild:!0,children:e.jsx("button",{type:"button",className:"flex aspect-square h-full w-full items-center justify-center p-1 transition disabled:opacity-40",onClick:()=>{R(v),x(l+1),S({history:[v.pathname],index:0})},children:e.jsx(O,{name:"Refresh","aria-hidden":"true"})})}),e.jsx(me,{children:"Refresh"})]})]}),e.jsxs(Qt,{method:"get",replace:!0,className:"flex flex-1 gap-2",onSubmit:()=>M(),children:[ne,e.jsxs("div",{className:"flex flex-1 items-center border-x bg-background p-3 leading-none text-foreground",children:[e.jsx("a",{href:v.toString(),target:"_blank",rel:"noreferrer",children:L.host}),e.jsx("input",{"aria-label":"pathname",className:"flex-1 bg-background focus-visible:outline-none",value:f,name:"pathname",onChange:w=>P(w.currentTarget.value)})]})]}),e.jsx(zn,{name:s}),e.jsxs(fe,{children:[e.jsx(pe,{asChild:!0,children:e.jsx("a",{href:v.toString(),target:"_blank",rel:"noreferrer",className:ee("flex aspect-square items-center justify-center px-3.5"),children:e.jsx(O,{name:"ExternalLink"})})}),e.jsx(me,{children:"Open in new tab"})]})]}),e.jsx("div",{className:"flex h-full w-full flex-grow dark:bg-white",children:e.jsx("iframe",{title:s,ref:T,src:L.toString(),className:"h-full w-full flex-grow bg-white"},d)})]})})}function we({id:t,appInfo:r,inBrowserBrowserRef:s}){const n=_e();if(!r)return e.jsx("p",{children:"No app here. Sorry."});const{isRunning:a,dev:o,name:i,portIsAvailable:u,title:l}=r;if(o.type==="script"){const x=De({domain:n.domain,port:o.portNumber});return e.jsx(Zn,{ref:s,isRunning:a,id:t??i,name:i,portIsAvailable:u,port:o.portNumber,baseUrl:x,initialRoute:o.initialRoute})}else return o.type==="browser"?e.jsxs("div",{className:"relative h-full flex-grow overflow-y-auto scrollbar-thin scrollbar-thumb-scrollbar",children:[e.jsxs("a",{href:o.pathname,target:"_blank",rel:"noreferrer",className:ve("absolute bottom-5 right-5 flex items-center justify-center rounded-full bg-gray-100 p-2.5 transition hover:bg-gray-200 dark:bg-gray-800 hover:dark:bg-gray-600"),children:[e.jsx(O,{name:"ExternalLink","aria-hidden":"true"}),e.jsx("span",{className:"sr-only",children:"Open in New Window"})]}),e.jsx("iframe",{title:l,src:o.pathname,className:"h-full w-full flex-grow bg-white"})]}):e.jsxs("p",{children:["Preview for dev type of ",e.jsx("code",{children:o.type})," not supported."]})}function er({appInfo:t,inBrowserBrowserRef:r,problemAppName:s,allApps:n,isUpToDate:a}){return e.jsx(st,{playgroundAppName:t==null?void 0:t.appName,problemAppName:s,allApps:n,isUpToDate:a,children:(t==null?void 0:t.dev.type)==="none"?e.jsxs("div",{children:[e.jsx("div",{className:"text-foreground-secondary flex h-full items-center justify-center text-2xl",children:"Non-UI playground"}),e.jsx("div",{children:e.jsxs("div",{className:"text-foreground-secondary flex flex-wrap gap-1 text-center",children:["Navigate to"," ",e.jsx(K,{content:t.fullPath,children:e.jsx("span",{className:"underline",onClick:()=>{navigator.clipboard.writeText(t.fullPath),nn.success("Copied playground path to clipboard")},children:"the playground directory"})})," ","in your editor and terminal to work on this exercise!"]})})]}):t?e.jsx(we,{id:t.appName,appInfo:t,inBrowserBrowserRef:r}):e.jsxs("div",{className:"flex flex-col justify-center gap-2",children:[e.jsx("p",{children:"Please set the playground first"}),s?e.jsx(Fe,{appName:s}):null]})})}function tr({handleClick:t,cacheLocation:r,embeddedKey:s,appFullPath:n}){const a=W();return e.jsxs(a.Form,{action:"/update-mdx-cache",method:"POST",children:[Re,e.jsx("input",{type:"hidden",name:"cacheLocation",value:r}),e.jsx("input",{type:"hidden",name:"embeddedKey",value:s}),e.jsx("input",{type:"hidden",name:"appFullPath",value:n}),e.jsx("button",{type:"submit",onClick:t,className:ee("launch_button",a.state==="idle"?null:"cursor-progress"),children:"Cancel Warning"})]})}const ot=c.createContext(null);function nr(){const t=c.useContext(ot);if(!t)throw new Error("useStepContext must be used within a StepContext.Provider");return t}function rr({children:t,inBrowserBrowserRef:r}){return e.jsx(ot.Provider,{value:{inBrowserBrowserRef:r},children:t})}const sr={CodeFile:cr,CodeFileNotification:lr,DiffLink:Le,PrevDiffLink:ir,NextDiffLink:or,InlineFile:ur,LinkToApp:fr};function ar({inBrowserBrowserRef:t}){const r=q();return r.exerciseStepApp.instructionsCode?e.jsx(rr,{inBrowserBrowserRef:t,children:e.jsx(rn,{epicVideoInfosPromise:r.epicVideoInfosPromise,children:e.jsx("div",{className:"prose dark:prose-invert sm:prose-lg",children:e.jsx(Wt,{code:r.exerciseStepApp.instructionsCode,components:sr})})})}):null}function it(t,r,s){const n=new URLSearchParams(t);return s===null?n.delete(r):n.set(r,s),n}function or({app:t=0,fullPage:r=!1,children:s}){return e.jsx(Le,{app1:t,app2:t+1,fullPage:r,children:s})}function ir({app:t=-1,fullPage:r=!1,children:s}){return e.jsx(Le,{app1:t,app2:t+1,fullPage:r,children:s})}function Le({app1:t=0,app2:r=1,children:s,fullPage:n=!1,to:a}){const o=q();if(!a&&!t&&!r)return e.jsx("callout-danger",{className:"notification",children:e.jsx("div",{className:"title",children:"DiffLink Error: invalid input"})});function i(d){var h;if(typeof d=="number"){const b=o.exerciseIndex+d;return(h=o.allApps[b])==null?void 0:h.name}if(!d)return null;for(const{name:b,stepName:y}of o.allApps)if(d===b\|\|d===y)return b;return null}if(a){const d=new URLSearchParams(a);t=d.get("app1"),r=d.get("app2")}const u=i(t),l=i(r);if(!u\|\|!l)return e.jsxs("callout-danger",{className:"notification",children:[e.jsx("div",{className:"title",children:"DiffLink Error: invalid input"}),!u&&e.jsxs("div",{children:['app1: "',t,'" is not a valid app name']}),!l&&e.jsxs("div",{children:['app2: "',r,'" is not a valid app name']})]});a\|\|(a=`app1=${u}&app2=${l}`);const x=n?`/diff?${a}`:`?${decodeURIComponent(it(new URLSearchParams,"preview",`diff&${a}`).toString())}`;return s\|\|(s=e.jsxs("span",{children:["Go to Diff ",n?"":"Preview"," from: ",e.jsx("code",{children:u})," to:"," ",e.jsx("code",{children:l})]})),e.jsx(ae,{to:x,children:s})}function cr({file:t}){return e.jsxs("div",{className:"border-4 border-[#ff4545] bg-[#ff454519] p-4 text-lg",children:["Something went wrong compiling ",e.jsx("b",{children:"CodeFile"})," for file: ",e.jsx("u",{children:t})," to markdown"]})}function lr({file:t,type:r="problem",children:s,variant:n,cacheLocation:a,embeddedKey:o,...i}){const[u,l]=c.useState("visible"),d=q()[r],h=()=>{u==="visible"&&(l("collapse"),setTimeout(()=>{l("none")},400))},b=ee("rounded px-4 py-1 font-mono text-sm font-semibold outline-none transition duration-300 ease-in-out",{"bg-amber-300/70 hover:bg-amber-300/40 active:bg-amber-300/50":n==="warning","bg-red-300/70 hover:bg-red-300/40 active:bg-red-300/50":n==="error"});return e.jsxs("div",{className:ee("notification important h-15 relative",{"duration-400 !my-0 !h-0 !py-0 !opacity-0 transition-all ease-out":u!=="visible",hidden:u==="none"}),children:[e.jsxs("div",{className:"absolute right-3 top-3 z-50 flex gap-4",children:[d?e.jsx("div",{className:b,title:`Edit ${t}`,children:e.jsx(le,{appFile:t,appName:d.name,...i,children:"Edit this File"})}):null,d&&n==="warning"?e.jsx("div",{className:b,title:`Remove the warning from here and from ${t} cache file`,children:e.jsx(tr,{handleClick:h,cacheLocation:a,embeddedKey:o,appFullPath:d.fullPath})}):null]}),s]})}function ur({file:t,type:r="playground",children:s=e.jsx("code",{children:t}),...n}){const a=q(),o=a[r]\|\|a[a.type],i=e.jsxs("div",{className:"launch-editor-button-wrapper flex underline underline-offset-4",children:[s," ",e.jsx("svg",{height:24,width:24,children:e.jsx("use",{href:"/icons.svg#keyboard"})})]});return ENV.EPICSHOP_DEPLOYED&&o?e.jsx("div",{className:"inline-block grow",children:e.jsx(le,{appFile:t,appName:o.name,...n,children:i})}):o?e.jsx("div",{className:"inline-block grow",children:e.jsx(le,{appFile:t,appName:o.name,...n,children:i})}):r==="playground"?e.jsx(K,{content:"You must 'Set to Playground' before opening a file",children:e.jsx("div",{className:"inline-block grow cursor-not-allowed",children:i})}):e.jsx(e.Fragment,{children:"children"})}function dr(t){return t==="problem"?"problem":t==="solution"?"solution":"playground"}function fr({to:t,children:r=e.jsx("code",{children:t.toString()}),...s}){var b;const[n]=ke(),a=`?${it(n,"pathname",t.toString()).toString()}`,o=q(),i=dr(n.get("preview")),u=_e(),l=o[i],x=(l==null?void 0:l.dev.type)==="script"?De({domain:u.domain,port:l.dev.portNumber}):((b=o.playground)==null?void 0:b.dev.type)==="browser"?o.playground.dev.pathname:null,{inBrowserBrowserRef:d}=nr(),h=x?x.slice(0,-1)+t.toString():null;return e.jsxs("div",{className:"inline-flex items-center justify-between gap-1",children:[e.jsx(ae,{to:a,...s,className:ve(s.className,{"cursor-not-allowed":ENV.EPICSHOP_DEPLOYED}),title:ENV.EPICSHOP_DEPLOYED?"Cannot link to app in deployed version":void 0,onClick:y=>{var S,f;ENV.EPICSHOP_DEPLOYED&&y.preventDefault(),(S=s.onClick)==null\|\|S.call(s,y),(f=d.current)==null\|\|f.handleExtrnalNavigation(t.toString())},children:r}),h?e.jsx(K,{content:"Open in new tab",children:e.jsx("a",{href:h,target:"_blank",rel:"noreferrer",className:ve("flex aspect-square items-center justify-center",{"cursor-not-allowed":ENV.EPICSHOP_DEPLOYED}),title:ENV.EPICSHOP_DEPLOYED?"Cannot link to app in deployed version":"Open in new tab",onClick:y=>{ENV.EPICSHOP_DEPLOYED&&y.preventDefault()},children:e.jsx(O,{name:"ExternalLink"})})}):null]})}const pr=m.intersection(m.object({type:m.literal("epicshop:test-status-update"),timestamp:m.number()}),m.union([m.object({status:m.literal("pending")}),m.object({status:m.literal("pass")}),m.object({status:m.literal("fail"),error:m.string()})])),mr=m.object({type:m.literal("epicshop:test-step-update"),status:m.literal("pass"),title:m.string(),timestamp:m.number()}),hr=m.union([mr,pr]);function xr({pathname:t,testFile:r}){const s=c.useRef(null),[n,a]=c.useState(null),[o,i]=c.useState([]);c.useEffect(()=>{function d(h){var S;if(h.source!==((S=s.current)==null?void 0:S.contentWindow)\|\|"request"in h.data)return;const b=hr.safeParse(h.data,{path:["messageEvent","data"]});if(!b.success){console.error("Invalid message from test iframe",h.data,b.error);return}const{data:y}=b;y.type==="epicshop:test-status-update"&&(y.status==="pending"&&i([]),a(y)),y.type==="epicshop:test-step-update"&&i(f=>[...f,y])}return window.addEventListener("message",d),()=>{window.removeEventListener("message",d)}},[]);const u={pending:e.jsx(Oe,{"aria-label":"Pending"}),pass:e.jsx(O,{name:"CheckSmall","aria-label":"Passed",className:"text-emerald-700"}),fail:e.jsx(O,{name:"Remove","aria-label":"Failed",className:"text-foreground-danger"}),unknown:e.jsx(O,{name:"Question","aria-label":"Unknown",className:"animate-pulse"})}[(n==null?void 0:n.status)??"unknown"],l=o.sort((d,h)=>d.timestamp-h.timestamp),x={pass:e.jsx(O,{name:"CheckSmall","aria-label":"Passed"}),fail:e.jsx(O,{name:"Remove","aria-label":"Failed"}),unknown:e.jsx(O,{name:"Question","aria-label":"Unknown",className:"animate-pulse"})};return e.jsx(e.Fragment,{children:e.jsx(Lt,{className:"w-full",type:"multiple",children:e.jsx(At,{icon:u,title:r,forceMount:!0,children:e.jsxs("div",{className:"not-prose",children:[e.jsxs("div",{className:"p-5 pt-3",children:[e.jsx("ul",{className:"",children:l.map(d=>e.jsx("li",{children:e.jsxs("div",{className:"flex items-baseline gap-2 text-emerald-700",children:[e.jsx("span",{children:x[d.status]}),e.jsx("pre",{className:"whitespace-pre-wrap",children:d.title})]})},d.timestamp+d.title))}),(n==null?void 0:n.status)==="fail"?e.jsxs("div",{className:"flex items-baseline gap-2 text-foreground-danger",children:[e.jsx("span",{children:x.fail}),e.jsx("pre",{className:"max-h-48 overflow-y-auto text-foreground-danger scrollbar-thin scrollbar-thumb-scrollbar",children:n.error})]}):null,e.jsx("iframe",{ref:s,title:r,src:t+r,className:"mt-5 min-h-[420px] w-full border bg-white"})]}),e.jsxs("div",{className:"flex border-y",children:[e.jsx("button",{onClick:()=>{var d,h;return(h=(d=s.current)==null?void 0:d.contentWindow)==null?void 0:h.location.reload()},className:"border-r p-3",children:e.jsx(O,{name:"Refresh","aria-label":"Rerun Tests"})}),e.jsx("a",{href:t+r,target:"_blank",rel:"noreferrer",className:"border-r p-3",children:e.jsx(O,{name:"ExternalLink","aria-label":"Open in New Window"})})]})]})})})})}const br=m.union([m.object({type:m.literal("init"),exitCode:m.number().nullable().optional(),isRunning:m.boolean(),output:m.array(m.object({type:m.union([m.literal("stdout"),m.literal("stderr")]),html:m.string(),timestamp:m.number()}))}),m.object({type:m.union([m.literal("stdout"),m.literal("stderr")]),data:m.string(),timestamp:m.number()}),m.object({type:m.literal("exit"),isRunning:m.literal(!1),code:m.number().nullable()})]),gr=m.array(br);function vr(t,r){return r(t)}function $r({name:t}){const[r,s]=c.useReducer(vr,{version:0,isRunning:!1,exitCode:void 0,lines:[]}),{version:n,isRunning:a,exitCode:o,lines:i}=r,u=sn(`/test?${new URLSearchParams({name:t})}&v=${n}`);return c.useEffect(()=>{if(!u)return;const l=JSON.parse(u),x=gr.safeParse(l);if(!x.success){console.error(x.error.flatten());return}for(const d of x.data)switch(d.type){case"exit":{const{isRunning:h,code:b}=d;s(y=>({...y,isRunning:h,exitCode:b}));break}case"init":{const{output:h,exitCode:b,isRunning:y}=d;s(S=>({...S,lines:h,exitCode:b,isRunning:y}));break}case"stderr":case"stdout":{const{type:h,data:b,timestamp:y}=d;s(S=>({...S,lines:[...S.lines,{type:h,html:b,timestamp:y}].sort((f,P)=>f.timestamp-P.timestamp),isRunning:!0}));break}}},[u]),e.jsxs("div",{className:"relative flex h-full w-full flex-col",children:[e.jsxs("div",{className:"flex h-12 w-full flex-shrink-0 items-center justify-between border-b",children:[e.jsxs("div",{className:"flex h-full items-center",children:[!a&&e.jsx(jr,{name:t,onRun:()=>{s(l=>({...l,exitCode:void 0,lines:[],version:l.version+1}))}}),a?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"flex h-full flex-grow items-center justify-center border-r px-3.5",children:e.jsx(Oe,{role:"status","aria-label":"Running Tests"})}),e.jsx(yr,{name:t})]}):null]}),!a&&o!==void 0&&e.jsx("p",{className:"pr-3.5 leading-none",children:o===0?"Tests passed":`Test failed (exit code ${String(o)})`}),!a&&o!==void 0&&e.jsx(wr,{name:t,onClear:()=>{s(l=>({...l,exitCode:void 0,lines:[]}))}})]}),e.jsxs("div",{className:"flex h-full flex-col gap-5 p-5",children:[e.jsx("p",{className:"font-mono text-sm font-medium uppercase",children:"Test Output"}),e.jsx("pre",{className:"shadow-on-scrollbox flex-1 overflow-y-scroll scrollbar-thin scrollbar-thumb-scrollbar",children:i.map(l=>e.jsx("code",{"data-type":l.type,dangerouslySetInnerHTML:{__html:l.html}},l.timestamp))})]})]})}function jr({name:t,onRun:r}){const s=W(),n=c.useRef(r);return c.useEffect(()=>{n.current=r},[r]),c.useEffect(()=>{var a,o;(a=s.data)!=null&&a.success&&((o=n.current)==null\|\|o.call(n))},[s.data]),e.jsxs(s.Form,{method:"POST",action:"/test",className:"h-full",children:[e.jsx("input",{type:"hidden",name:"name",value:t}),e.jsx(K,{content:s.state==="idle"?"Run Tests":"Running Tests...",children:e.jsx("button",{type:"submit",name:"intent",value:"run",className:"flex h-full flex-grow items-center justify-center border-r px-3.5",children:s.state==="idle"?e.jsx(O,{name:"TriangleSmall"}):e.jsx(Oe,{role:"status"})})})]})}function wr({name:t,onClear:r}){const s=W(),n=c.useRef(r);return c.useEffect(()=>{n.current=r},[r]),c.useEffect(()=>{var a,o;(a=s.data)!=null&&a.success&&((o=n.current)==null\|\|o.call(n))},[s.data]),e.jsxs(s.Form,{method:"POST",action:"/test",className:"h-full",children:[e.jsx("input",{type:"hidden",name:"name",value:t}),e.jsx(K,{content:s.state==="idle"?"Clear Tests":"Clearing Tests...",children:e.jsx("button",{type:"submit",name:"intent",value:"clear",className:"flex h-full flex-grow items-center justify-center border-l px-3.5",children:s.state==="idle"?e.jsx(O,{name:"Clear"}):e.jsx(O,{name:"Clear",className:"animate-pulse",role:"status"})})})]})}function yr({name:t,onStop:r}){const s=W(),n=c.useRef(r);return c.useEffect(()=>{n.current=r},[r]),c.useEffect(()=>{var a,o;(a=s.data)!=null&&a.success&&((o=n.current)==null\|\|o.call(n))},[s.data]),e.jsxs(s.Form,{method:"POST",action:"/test",className:"h-full",children:[e.jsx("input",{type:"hidden",name:"name",value:t}),e.jsx(K,{content:s.state==="idle"?"Stop Tests":"Stopping Tests...",children:e.jsx("button",{type:"submit",name:"intent",value:"stop",className:"flex h-full flex-grow items-center justify-center border-r px-3.5",children:s.state==="idle"?e.jsx(O,{name:"Stop"}):e.jsx(O,{name:"Stop",className:"animate-pulse",role:"status"})})})]})}function Nr({appInfo:t,problemAppName:r,allApps:s,isUpToDate:n}){const[a,o]=c.useState(0);let i=e.jsx("p",{children:"No tests here. Sorry."});if((t==null?void 0:t.test.type)==="script"&&(i=e.jsx($r,{name:t.name})),(t==null?void 0:t.test.type)==="browser"){const{pathname:u}=t.test;i=e.jsxs("div",{className:"flex h-full w-full flex-grow flex-col",children:[t.test.testFiles.map(l=>e.jsx("div",{children:e.jsx(xr,{pathname:u,testFile:l})},l)),e.jsx("div",{className:"px-3 py-[21px]",children:e.jsxs("button",{onClick:()=>o(l=>l+1),className:"flex items-center gap-2 font-mono text-sm uppercase leading-none",children:[e.jsx(O,{name:"Refresh","aria-hidden":!0})," Rerun All Tests"]})})]},a)}return e.jsx(st,{playgroundAppName:t==null?void 0:t.appName,problemAppName:r,allApps:s,isUpToDate:n,children:i})}const ct="Popover",[lt,fs]=Ne(ct,[Ye]),Ae=Ye(),[Sr,oe]=lt(ct),Pr=t=>{const{__scopePopover:r,children:s,open:n,defaultOpen:a,onOpenChange:o,modal:i=!1}=t,u=Ae(r),l=c.useRef(null),[x,d]=c.useState(!1),[h=!1,b]=Pe({prop:n,defaultProp:a,onChange:o});return c.createElement(gt,u,c.createElement(Sr,{scope:r,contentId:Ee(),triggerRef:l,open:h,onOpenChange:b,onOpenToggle:c.useCallback(()=>b(y=>!y),[b]),hasCustomAnchor:x,onCustomAnchorAdd:c.useCallback(()=>d(!0),[]),onCustomAnchorRemove:c.useCallback(()=>d(!1),[]),modal:i},s))},Er="PopoverTrigger",Tr=c.forwardRef((t,r)=>{const{__scopePopover:s,...n}=t,a=oe(Er,s),o=Ae(s),i=Se(r,a.triggerRef),u=c.createElement(te.button,B({type:"button","aria-haspopup":"dialog","aria-expanded":a.open,"aria-controls":a.contentId,"data-state":ft(a.open)},n,{ref:i,onClick:z(t.onClick,a.onOpenToggle)}));return a.hasCustomAnchor?u:c.createElement(vt,B({asChild:!0},o),u)}),ut="PopoverPortal",[Cr,Dr]=lt(ut,{forceMount:void 0}),Or=t=>{const{__scopePopover:r,forceMount:s,children:n,container:a}=t,o=oe(ut,r);return c.createElement(Cr,{scope:r,forceMount:s},c.createElement(Te,{present:s\|\|o.open},c.createElement(Ut,{asChild:!0,container:a},n)))},ue="PopoverContent",Rr=c.forwardRef((t,r)=>{const s=Dr(ue,t.__scopePopover),{forceMount:n=s.forceMount,...a}=t,o=oe(ue,t.__scopePopover);return c.createElement(Te,{present:n\|\|o.open},o.modal?c.createElement(kr,B({},a,{ref:r})):c.createElement(_r,B({},a,{ref:r})))}),kr=c.forwardRef((t,r)=>{const s=oe(ue,t.__scopePopover),n=c.useRef(null),a=Se(r,n),o=c.useRef(!1);return c.useEffect(()=>{const i=n.current;if(i)return Ht(i)},[]),c.createElement(Yt,{as:$t,allowPinchZoom:!0},c.createElement(dt,B({},t,{ref:a,trapFocus:s.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:z(t.onCloseAutoFocus,i=>{var u;i.preventDefault(),o.current\|\|(u=s.triggerRef.current)===null\|\|u===void 0\|\|u.focus()}),onPointerDownOutside:z(t.onPointerDownOutside,i=>{const u=i.detail.originalEvent,l=u.button===0&&u.ctrlKey===!0,x=u.button===2\|\|l;o.current=x},{checkForDefaultPrevented:!1}),onFocusOutside:z(t.onFocusOutside,i=>i.preventDefault(),{checkForDefaultPrevented:!1})})))}),_r=c.forwardRef((t,r)=>{const s=oe(ue,t.__scopePopover),n=c.useRef(!1),a=c.useRef(!1);return c.createElement(dt,B({},t,{ref:r,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:o=>{var i;if((i=t.onCloseAutoFocus)===null\|\|i===void 0\|\|i.call(t,o),!o.defaultPrevented){var u;n.current\|\|(u=s.triggerRef.current)===null\|\|u===void 0\|\|u.focus(),o.preventDefault()}n.current=!1,a.current=!1},onInteractOutside:o=>{var i,u;(i=t.onInteractOutside)===null\|\|i===void 0\|\|i.call(t,o),o.defaultPrevented\|\|(n.current=!0,o.detail.originalEvent.type==="pointerdown"&&(a.current=!0));const l=o.target;((u=s.triggerRef.current)===null\|\|u===void 0?void 0:u.contains(l))&&o.preventDefault(),o.detail.originalEvent.type==="focusin"&&a.current&&o.preventDefault()}}))}),dt=c.forwardRef((t,r)=>{const{__scopePopover:s,trapFocus:n,onOpenAutoFocus:a,onCloseAutoFocus:o,disableOutsidePointerEvents:i,onEscapeKeyDown:u,onPointerDownOutside:l,onFocusOutside:x,onInteractOutside:d,...h}=t,b=oe(ue,s),y=Ae(s);return Bt(),c.createElement(Vt,{asChild:!0,loop:!0,trapped:n,onMountAutoFocus:a,onUnmountAutoFocus:o},c.createElement(jt,{asChild:!0,disableOutsidePointerEvents:i,onInteractOutside:d,onEscapeKeyDown:u,onPointerDownOutside:l,onFocusOutside:x,onDismiss:()=>b.onOpenChange(!1)},c.createElement(wt,B({"data-state":ft(b.open),role:"dialog",id:b.contentId},y,h,{ref:r,style:{...h.style,"--radix-popover-content-transform-origin":"var(--radix-popper-transform-origin)","--radix-popover-content-available-width":"var(--radix-popper-available-width)","--radix-popover-content-available-height":"var(--radix-popper-available-height)","--radix-popover-trigger-width":"var(--radix-popper-anchor-width)","--radix-popover-trigger-height":"var(--radix-popper-anchor-height)"}}))))});function ft(t){return t?"open":"closed"}const Mr=Pr,Ir=Tr,Fr=Or,Lr=Rr;function Ar(){var i,u;const t=q(),[r,s]=c.useState(!1),n=c.useRef(null);function a(){s(!1)}const o=(i=t.playground)==null?void 0:i.appName;return e.jsx(e.Fragment,{children:e.jsxs(Mr,{open:r,onOpenChange:s,children:[e.jsx(Ir,{asChild:!0,children:e.jsxs("button",{className:"flex h-full items-center gap-1 border-r px-6 py-3 font-mono text-sm uppercase","aria-label":"Relevant Files",children:[e.jsx(O,{name:"Files"}),"Files"]})}),e.jsx(Fr,{children:e.jsx(Lr,{ref:n,className:"slideRightContent lg:slideUpContent invert-theme z-10 select-none rounded bg-background px-9 py-8 text-foreground",align:"start",sideOffset:5,children:e.jsxs("div",{className:"launch-editor-wrapper",children:[e.jsx("strong",{className:"inline-block px-2 pb-4 font-semibold uppercase",children:"Relevant Files"}),t.problem&&((u=t.playground)==null?void 0:u.appName)!==t.problem.name?e.jsx("div",{className:"mb-2 rounded p-1 font-mono font-medium",children:e.jsx(Fe,{appName:t.problem.name})}):null,e.jsx("div",{id:"files",children:e.jsx(c.Suspense,{fallback:e.jsx(K,{content:"Loading diff",children:e.jsx("div",{className:"flex justify-center",children:e.jsx(O,{name:"Refresh",className:"h-8 w-8 animate-spin"})})}),children:e.jsx(Ve,{resolve:t.diff,errorElement:e.jsx("div",{className:"text-foreground-danger",children:"Something went wrong."}),children:({diffFiles:l})=>{if(!l)return e.jsx("p",{className:"text-foreground-danger",children:"Unable to determine diff"});if(typeof l=="string")return e.jsx("p",{className:"text-foreground-danger",children:l});if(!l.length)return e.jsx("p",{children:"No files changed"});const x=o\|\|ENV.EPICSHOP_GITHUB_ROOT?{}:{title:"You must 'Set to Playground' before opening a file",className:"not-allowed"};return e.jsxs("ul",{...x,children:[l.length>1&&!ENV.EPICSHOP_DEPLOYED?e.jsx("div",{className:"mb-2 border-b border-b-gray-50 border-opacity-50 pb-2 font-sans",children:e.jsx(le,{appFile:l.map(d=>`${d.path},${d.line},1`),appName:"playground",onUpdate:a,children:e.jsx("p",{children:"Open All Files"})})}):null,l.map(d=>{var h;return e.jsx("li",{"data-state":d.status,children:e.jsx(le,{appFile:`${d.path},${d.line},1`,appName:ENV.EPICSHOP_DEPLOYED?((h=t.problem)==null?void 0:h.name)??"playground":"playground",onUpdate:a,children:e.jsx("code",{children:d.path})})},d.path)})]})}})})})]})})})]})})}function pt(t,r){var i;const s=(t==null?void 0:t.exerciseStepApp.exerciseNumber.toString().padStart(2,"0"))??"00",n=(t==null?void 0:t.exerciseStepApp.stepNumber.toString().padStart(2,"0"))??"00",a={problem:"💪",solution:"🏁"}[(t==null?void 0:t.type)??"problem"],o=((i=t==null?void 0:t[t.type])==null?void 0:i.title)??"N/A";return{emoji:a,stepNumber:n,title:o,exerciseNumber:s,exerciseTitle:(t==null?void 0:t.exerciseTitle)??"Unknown exercise",workshopTitle:r,type:(t==null?void 0:t.type)??"problem"}}const ps=({data:t,matches:r,params:s})=>{var x;const n=(x=r.find(d=>d.id==="root"))==null?void 0:x.data;if(!t\|\|!n)return[{title:"🦉 \| Error"}];const{emoji:a,stepNumber:o,title:i,exerciseNumber:u,exerciseTitle:l}=pt(t);return Jt({title:`${a} \| ${o}. ${i} \| ${u}. ${l} \| ${n.workshopTitle}`,description:`${s.type} step for exercise ${u}. ${l}`,ogTitle:i,ogDescription:`${l} step ${Number(o)} ${s.type}`,instructor:n.instructor,requestInfo:n.requestInfo})},ye=["playground","problem","solution","tests","diff","chat"],Ur=t=>!!(t&&ye.includes(t));function Hr(t,r,s){const n=new URLSearchParams(t);return s===null?n.delete(r):n.set(r,s),n}function ms(){var h,b,y,S,f,P,T;const t=q(),[r]=ke(),s=r.get("preview"),n=c.useRef(null),a=pt(t),o=Ce(),i=mt();function u(v){var D,L;if(v==="tests")return ENV.EPICSHOP_DEPLOYED\|\|!t.playground\|\|t.playground.test.type==="none";if(v==="problem"\|\|v==="solution"){if(((D=t[v])==null?void 0:D.dev.type)==="none")return!0;if(ENV.EPICSHOP_DEPLOYED)return((L=t[v])==null?void 0:L.dev.type)!=="browser"}return!!(v==="playground"&&ENV.EPICSHOP_DEPLOYED)}const l=Ur(s)?s:ye.find(v=>!u(v)),x=`/diff?${new URLSearchParams({app1:((h=t.problem)==null?void 0:h.name)??"",app2:((b=t.solution)==null?void 0:b.name)??""})}`;function d(v){v.altKey&&!v.ctrlKey&&!v.shiftKey&&!v.metaKey&&(v.preventDefault(),i(x))}return e.jsx("div",{className:"flex flex-grow flex-col",children:e.jsxs("main",{className:"grid h-full flex-grow grid-cols-1 grid-rows-2 lg:grid-cols-2 lg:grid-rows-1",children:[e.jsxs("div",{className:"relative col-span-1 row-span-1 flex h-full flex-col lg:border-r",children:[e.jsx("h1",{className:"h-14 border-b pl-10 pr-5 text-sm font-medium leading-tight",children:e.jsxs("div",{className:"flex h-14 flex-wrap items-center justify-between gap-x-2 py-2",children:[e.jsxs("div",{className:"flex items-center justify-start gap-x-2 uppercase",children:[e.jsxs(ae,{to:`/${a.exerciseNumber}`,className:"hover:underline",children:[a.exerciseNumber,". ",a.exerciseTitle]}),"/",e.jsxs(ae,{to:".",className:"hover:underline",children:[a.stepNumber,". ",a.title," (",a.emoji," ",a.type,")"]})]}),t.problem&&((y=t.playground)==null?void 0:y.appName)!==t.problem.name?e.jsx(Fe,{appName:t.problem.name}):null]})}),e.jsx("article",{id:t.articleId,className:"shadow-on-scrollbox h-full w-full max-w-none flex-1 scroll-pt-6 space-y-6 overflow-y-auto p-10 pt-8 scrollbar-thin scrollbar-thumb-scrollbar",children:t.exerciseStepApp.instructionsCode?e.jsx("div",{className:"prose dark:prose-invert sm:prose-lg",children:e.jsx(ar,{inBrowserBrowserRef:n})}):e.jsx("p",{children:"No instructions yet..."})},t.articleId),e.jsx(ht,{elementQuery:`#${t.articleId}`},`scroll-${t.articleId}`),t.type==="solution"?e.jsx(Zt,{type:"step",exerciseNumber:t.exerciseStepApp.exerciseNumber,stepNumber:t.exerciseStepApp.stepNumber,className:"h-14 border-t px-6"}):null,e.jsxs("div",{className:"flex h-16 justify-between border-b-4 border-t lg:border-b-0",children:[e.jsx("div",{children:e.jsx("div",{className:"h-full",children:e.jsx(Ar,{})})}),e.jsx(qt,{appName:t.exerciseStepApp.name,relativePath:t.exerciseStepApp.relativePath}),e.jsx(Kt,{prev:t.prevStepLink?{to:t.prevStepLink.to,"aria-label":"Previous Step"}:null,next:t.nextStepLink?{to:t.nextStepLink.to,"aria-label":"Next Step"}:null})]})]}),e.jsxs(Dn,{className:"relative col-span-1 row-span-1 flex flex-col overflow-y-auto",value:l,children:[e.jsx(On,{className:"h-14 min-h-14 overflow-x-hidden border-b scrollbar-thin scrollbar-thumb-scrollbar",children:ye.map(v=>{const D=u(v);return e.jsx(Rn,{value:v,hidden:D,asChild:!0,children:e.jsx(ae,{id:`${v}-tab`,className:ee("clip-path-button relative h-full px-6 py-4 font-mono text-sm uppercase outline-none radix-state-active:z-10 radix-state-active:bg-foreground radix-state-active:text-background radix-state-active:hover:bg-foreground/80 radix-state-active:hover:text-background/80 radix-state-inactive:hover:bg-foreground/20 radix-state-inactive:hover:text-foreground/80 focus:bg-foreground/80 focus:text-background/80",D?"hidden":"inline-block"),preventScrollReset:!0,prefetch:"intent",onClick:d,to:v==="diff"&&o?x:`?${Hr(r,"preview",v==="playground"?null:v)}`,children:v})},v)})}),e.jsxs("div",{className:"relative z-10 flex flex-grow flex-col overflow-y-auto",children:[e.jsx(se,{value:"playground",className:"flex flex-grow items-center justify-center radix-state-inactive:hidden",children:e.jsx(er,{appInfo:t.playground,problemAppName:(S=t.problem)==null?void 0:S.name,inBrowserBrowserRef:n,allApps:t.allApps,isUpToDate:((f=t.playground)==null?void 0:f.isUpToDate)??!1})}),e.jsx(se,{value:"problem",className:"flex flex-grow items-center justify-center radix-state-inactive:hidden",children:e.jsx(we,{appInfo:t.problem,inBrowserBrowserRef:n})}),e.jsx(se,{value:"solution",className:"flex flex-grow items-center justify-center radix-state-inactive:hidden",children:e.jsx(we,{appInfo:t.solution,inBrowserBrowserRef:n})}),e.jsx(se,{value:"tests",className:"flex flex-grow items-start justify-center overflow-hidden radix-state-inactive:hidden",children:e.jsx(Nr,{appInfo:t.playground,problemAppName:(P=t.problem)==null?void 0:P.name,allApps:t.allApps,isUpToDate:((T=t.playground)==null?void 0:T.isUpToDate)??!1})}),e.jsx(se,{value:"diff",className:"flex h-full flex-grow items-start justify-center radix-state-inactive:hidden",children:e.jsx(zt,{diff:t.diff,allApps:t.allApps})}),e.jsx(se,{value:"chat",className:"flex h-full flex-grow items-start justify-center radix-state-inactive:hidden",children:e.jsx(Yn,{})})]})]})]})})}function hs(){return e.jsx(Gt,{statusHandlers:{404:()=>e.jsx("p",{children:"Sorry, we couldn't find an app here."})}})}export{hs as ErrorBoundary,ms as default,ps as meta};
2	- //# sourceMappingURL=_layout-xu6a9He_.js.map