@epic-web/workshop-app 6.69.1 → 6.71.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epic-web/workshop-app",
-  "version": "6.69.1",
+  "version": "6.71.0",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -42,8 +42,8 @@
     "@epic-web/invariant": "^1.0.0",
     "@epic-web/remember": "^1.1.0",
     "@epic-web/restore-scroll": "^2.0.0",
-    "@epic-web/workshop-presence": "6.69.1",
-    "@epic-web/workshop-utils": "6.69.1",
+    "@epic-web/workshop-presence": "6.71.0",
+    "@epic-web/workshop-utils": "6.71.0",
     "@mdx-js/mdx": "^3.1.1",
     "@mux/mux-player-react": "^3.10.2",
     "@nasa-gcn/remix-seo": "^2.0.1",

package/build/client/assets/_exerciseNumber_.finished-CGoPhVVF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_exerciseNumber_.finished-CGoPhVVF.js","sources":["../../../app/routes/_app+/exercise+/$exerciseNumber_.finished.tsx"],"sourcesContent":["import path from 'path'\nimport { invariantResponse } from '@epic-web/invariant'\nimport { ElementScrollRestoration } from '@epic-web/restore-scroll'\nimport {\n\tgetAppPageRoute,\n\tgetApps,\n\tgetExercise,\n\tgetWorkshopRoot,\n\tisExerciseStepApp,\n} from '@epic-web/workshop-utils/apps.server'\nimport { getWorkshopConfig } from '@epic-web/workshop-utils/config.server'\nimport { getEpicVideoInfos } from '@epic-web/workshop-utils/epic-api.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n} from '@epic-web/workshop-utils/timing.server'\nimport slugify from '@sindresorhus/slugify'\nimport * as React from 'react'\nimport { data, type HeadersFunction, Link } from 'react-router'\nimport { EpicVideoInfoProvider } from '#app/components/epic-video.tsx'\nimport { Icon } from '#app/components/icons.tsx'\nimport { Loading } from '#app/components/loading.tsx'\nimport { NavChevrons } from '#app/components/nav-chevrons.tsx'\nimport { useRevalidationWS } from '#app/components/revalidation-ws.tsx'\nimport { EditFileOnGitHub } from '#app/routes/launch-editor.tsx'\nimport { ProgressToggle } from '#app/routes/progress.tsx'\nimport { useTheme } from '#app/routes/theme/index.tsx'\nimport { Mdx } from '#app/utils/mdx.tsx'\nimport { cn } from '#app/utils/misc.tsx'\nimport { useIsOnline } from '#app/utils/online.ts'\nimport { getRootMatchLoaderData } from '#app/utils/root-loader.ts'\nimport { getSeoMetaTags } from '#app/utils/seo.ts'\nimport { type Route } from './+types/$exerciseNumber_.finished.tsx'\n\nexport const meta: Route.MetaFunction = ({ loaderData, matches }) => {\n\tconst number = loaderData?.exercise.exerciseNumber.toString().padStart(2, '0')\n\n\tconst rootData = getRootMatchLoaderData(matches)\n\tif (!loaderData || !rootData) return [{ title: '🦉 | Error' }]\n\n\treturn getSeoMetaTags({\n\t\ttitle: `🦉 | ${number}. ${loaderData.exercise.title} | ${rootData?.workshopTitle}`,\n\t\tdescription: `Elaboration for ${number}. ${loaderData.exercise.title}`,\n\t\togTitle: `Finished: ${loaderData.exercise.title}`,\n\t\togDescription: `Elaboration for exercise ${Number(number)}`,\n\t\tinstructor: rootData.instructor,\n\t\trequestInfo: rootData.requestInfo,\n\t})\n}\n\nexport async function loader({ request, params }: Route.LoaderArgs) {\n\tconst timings = makeTimings('exerciseFinishedLoader')\n\tinvariantResponse(params.exerciseNumber, 'exerciseNumber is required')\n\tconst exercise = await getExercise(params.exerciseNumber, {\n\t\ttimings,\n\t\trequest,\n\t})\n\tif (!exercise) {\n\t\tthrow new Response('Not found', { status: 404 })\n\t}\n\tconst workshopConfig = getWorkshopConfig()\n\tconst exerciseFormTemplate = workshopConfig.forms.exercise\n\tconst exerciseFormEmbedUrl = exerciseFormTemplate\n\t\t.replace('{workshopTitle}', encodeURIComponent(workshopConfig.title))\n\t\t.replace('{exerciseTitle}', encodeURIComponent(exercise.title))\n\tconst nextExercise = await getExercise(exercise.exerciseNumber + 1, {\n\t\ttimings,\n\t\trequest,\n\t})\n\n\tconst finishedFilepath = path.join(\n\t\tgetWorkshopRoot(),\n\t\t'exercises',\n\t\texercise.dirName,\n\t\t'FINISHED.mdx',\n\t)\n\n\tconst apps = await getApps({ request, timings })\n\tconst exerciseApps = apps\n\t\t.filter(isExerciseStepApp)\n\t\t.filter((app) => app.exerciseNumber === exercise.exerciseNumber)\n\tconst prevApp = exerciseApps[exerciseApps.length - 1]\n\n\tconst articleId = `workshop-${slugify(workshopConfig.title)}-${\n\t\texercise.exerciseNumber\n\t}-finished`\n\n\treturn data(\n\t\t{\n\t\t\tarticleId,\n\t\t\tworkshopTitle: workshopConfig.title,\n\t\t\texercise,\n\t\t\texerciseFormEmbedUrl,\n\t\t\tepicVideoInfosPromise: getEpicVideoInfos(\n\t\t\t\texercise.finishedEpicVideoEmbeds,\n\t\t\t\t{ request },\n\t\t\t),\n\t\t\texerciseFinished: {\n\t\t\t\tfile: finishedFilepath,\n\t\t\t\trelativePath: `exercises/${exercise.dirName}/FINISHED.mdx`,\n\t\t\t},\n\t\t\tprevStepLink: prevApp\n\t\t\t\t? {\n\t\t\t\t\t\tto: getAppPageRoute(prevApp),\n\t\t\t\t\t\t'aria-label': `${prevApp.title} (${prevApp.type})`,\n\t\t\t\t\t}\n\t\t\t\t: null,\n\t\t\tnextStepLink: nextExercise\n\t\t\t\t? {\n\t\t\t\t\t\tto: `/exercise/${nextExercise.exerciseNumber.toString().padStart(2, '0')}`,\n\t\t\t\t\t\t'aria-label': `${nextExercise.title}`,\n\t\t\t\t\t}\n\t\t\t\t: {\n\t\t\t\t\t\tto: '/finished',\n\t\t\t\t\t\t'aria-label': 'Finished! 🎉',\n\t\t\t\t\t},\n\t\t},\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Server-Timing': getServerTimeHeader(timings),\n\t\t\t},\n\t\t},\n\t)\n}\n\nexport const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {\n\tconst headers = {\n\t\t'Cache-Control': loaderHeaders.get('Cache-Control') ?? '',\n\t\t'Server-Timing': combineServerTimings(loaderHeaders, parentHeaders),\n\t}\n\treturn headers\n}\n\nconst mdxComponents = { h1: () => null }\nexport default function ExerciseFinished({\n\tloaderData: data,\n}: Route.ComponentProps) {\n\tconst exerciseNumber = data.exercise.exerciseNumber\n\t\t.toString()\n\t\t.padStart(2, '0')\n\n\tuseRevalidationWS({\n\t\twatchPaths: [`./exercises/${exerciseNumber}/FINISHED.mdx`],\n\t})\n\n\treturn (\n\t\t<div className=\"flex max-w-full grow flex-col\">\n\t\t\t<main className=\"flex grow flex-col sm:grid sm:h-full sm:min-h-[800px] sm:grid-cols-1 sm:grid-rows-2 md:min-h-[unset] lg:grid-cols-2 lg:grid-rows-1\">\n\t\t\t\t<div className=\"relative flex flex-col sm:col-span-1 sm:row-span-1 sm:h-full lg:border-r\">\n\t\t\t\t\t<h1 className=\"h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium\">\n\t\t\t\t\t\t<div className=\"flex h-14 flex-wrap items-center justify-between gap-x-2 py-2\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-start gap-x-2\">\n\t\t\t\t\t\t\t\t<Link to={`/${exerciseNumber}`} className=\"hover:underline\">\n\t\t\t\t\t\t\t\t\t{`${exerciseNumber}. ${data.exercise.title}`}\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t<span>/</span>\n\t\t\t\t\t\t\t\t<span>Elaboration</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</h1>\n\n\t\t\t\t\t<article\n\t\t\t\t\t\tclassName=\"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar h-full w-full max-w-none flex-1 scroll-pt-6 space-y-6 overflow-y-auto p-2 sm:p-10 sm:pt-8\"\n\t\t\t\t\t\tid={data.articleId}\n\t\t\t\t\t>\n\t\t\t\t\t\t{data.exercise.finishedCode ? (\n\t\t\t\t\t\t\t<EpicVideoInfoProvider\n\t\t\t\t\t\t\t\tepicVideoInfosPromise={data.epicVideoInfosPromise}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"prose dark:prose-invert sm:prose-lg\">\n\t\t\t\t\t\t\t\t\t<Mdx\n\t\t\t\t\t\t\t\t\t\tcode={data.exercise.finishedCode}\n\t\t\t\t\t\t\t\t\t\tcomponents={mdxComponents}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</EpicVideoInfoProvider>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t// TODO: render a random dad joke...\n\t\t\t\t\t\t\t'No finished instructions yet...'\n\t\t\t\t\t\t)}\n\t\t\t\t\t</article>\n\t\t\t\t\t<ElementScrollRestoration elementQuery={`#${data.articleId}`} />\n\t\t\t\t\t<ProgressToggle\n\t\t\t\t\t\ttype=\"finished\"\n\t\t\t\t\t\texerciseNumber={data.exercise.exerciseNumber}\n\t\t\t\t\t\tclassName=\"h-14 border-t px-6\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0\">\n\t\t\t\t\t\t<div />\n\t\t\t\t\t\t<EditFileOnGitHub\n\t\t\t\t\t\t\tfile={data.exerciseFinished.file}\n\t\t\t\t\t\t\trelativePath={data.exerciseFinished.relativePath}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<NavChevrons prev={data.prevStepLink} next={data.nextStepLink} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Survey\n\t\t\t\t\texerciseFormEmbedUrl={data.exerciseFormEmbedUrl}\n\t\t\t\t\texerciseTitle={data.exercise.title}\n\t\t\t\t/>\n\t\t\t</main>\n\t\t</div>\n\t)\n}\n\nfunction Survey({\n\texerciseFormEmbedUrl,\n\texerciseTitle,\n}: {\n\texerciseFormEmbedUrl: string\n\texerciseTitle: string\n}) {\n\tconst theme = useTheme()\n\tconst [iframeLoaded, setIframeLoaded] = React.useState(false)\n\tconst isOnline = useIsOnline()\n\tif (!isOnline) {\n\t\treturn (\n\t\t\t<div className=\"relative shrink-0\">\n\t\t\t\t<div className=\"text-body-md text-foreground-destructive absolute inset-0 z-10 flex items-center justify-center\">\n\t\t\t\t\t<Icon name=\"WifiNoConnection\" size=\"xl\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{'Unable to load the '}\n\t\t\t\t\t\t\t<a href={exerciseFormEmbedUrl} className=\"underline\">\n\t\t\t\t\t\t\t\t{`${exerciseTitle} feedback form`}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t{' when offline'}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Icon>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t}\n\treturn (\n\t\t<div className=\"relative min-h-full sm:min-h-[unset] sm:shrink-0\">\n\t\t\t{!iframeLoaded ? (\n\t\t\t\t<div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n\t\t\t\t\t<Loading>\n\t\t\t\t\t\t<span>Loading {exerciseTitle} Elaboration form</span>\n\t\t\t\t\t</Loading>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<iframe\n\t\t\t\tonLoad={() => setIframeLoaded(true)}\n\t\t\t\t// show what would have shown if there is an error\n\t\t\t\tonError={() => setIframeLoaded(true)}\n\t\t\t\ttitle=\"Elaboration\"\n\t\t\t\tsrc={exerciseFormEmbedUrl}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'absolute inset-0 flex h-full w-full transition-opacity duration-300',\n\t\t\t\t\tiframeLoaded ? 'opacity-100' : 'opacity-0',\n\t\t\t\t)}\n\t\t\t\tstyle={{ colorScheme: theme }}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"names":["meta","loaderData","matches","number","exercise","exerciseNumber","toString","padStart","rootData","getRootMatchLoaderData","title","getSeoMetaTags","workshopTitle","description","ogTitle","ogDescription","Number","instructor","requestInfo","mdxComponents","h1","$exerciseNumber__finished","_UNSAFE_withComponentProps","data","useRevalidationWS","watchPaths","className","children","jsxs","jsx","Link","to","id","articleId","finishedCode","EpicVideoInfoProvider","epicVideoInfosPromise","Mdx","code","components","ElementScrollRestoration","elementQuery","ProgressToggle","type","EditFileOnGitHub","file","exerciseFinished","relativePath","NavChevrons","prev","prevStepLink","next","nextStepLink","Survey","exerciseFormEmbedUrl","exerciseTitle","theme","useTheme","iframeLoaded","setIframeLoaded","React","useIsOnline","Loading","onLoad","onError","src","cn","style","colorScheme","Icon","name","size","href"],"mappings":"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"}

package/build/client/assets/_extra-BZPB_nWQ.js

@@ -1,2 +0,0 @@
-import{w as C,a as I,b as R,d as S,L as l}from"./chunk-EPOLDU6W-BCLmut3y.js";import{j as r}from"./jsx-runtime-C5WNSv3b.js";import{E as T}from"./index-CEVyDj51.js";import{g as $,R as A,P as k,C as n,a as M,D as B}from"./playground-C_aP_pE8.js";import{r as i}from"./index-CqIc3cxq.js";import{U as H}from"./diff-CxEbhF8Q.js";import{E as L}from"./epic-video-BVcJzJzi.js";import{G as O}from"./error-boundary-DFBd6s0g.js";import{N as U}from"./nav-chevrons-DlNUibJV.js";import{u as V}from"./revalidation-ws-BJWJviUX.js";import{u as z}from"./workshop-config-Zfc8zU0x.js";import{P as X}from"./preview-CiDtuQCc.js";import{E as F}from"./launch-editor-B2dmpkaO.js";import{S as G}from"./set-playground-DeMY9i7p.js";import{c as q,M as W}from"./mdx-vrch0szL.js";import{g as Y,u as _}from"./root-loader-BOzEMapJ.js";import{g as Q}from"./seo-t5J-DRxw.js";import{s as j,a as J}from"./split-layout-DnRER1bP.js";import"./misc-DVYuZMjW.js";import"./loading-CUydCGD3.js";import"./index-BW8stNyh.js";import"./tooltip-Chzzs4KB.js";import"./index-vDCSPjrM.js";import"./pe-CIZUOJMr.js";import"./schemas-Uj5SZtvt.js";import"./discord-DlU9y5Iz.js";import"./user-BsPobzjB.js";import"./online-DiNLkgTC.js";import"./index-BOhw3wcM.js";import"./index-C_KjwKVt.js";import"./index-DzdDahau.js";import"./playground-window-D9a7P7rH.js";import"./accordion-CzXT3k43.js";import"./use-event-source-BuD4_2SF.js";import"./preload-helper-BXl3LOEh.js";import"./button-CIlVtsau.js";import"./progress-bar-B27isaGl.js";import"./onboarding-indicator-CVwXz3Cn.js";import"./dialog-DnpUg3VT.js";const He=o=>{const e=o.data,s=Y(o.matches);return!e||!s?[{title:"🦉 | Error"}]:Q({title:`📚 | ${e.extra.title} | ${s.workshopTitle}`,description:`Extra: ${e.extra.title}`,ogTitle:e.extra.title,ogDescription:`Extra: ${e.extra.title}`,instructor:s.instructor,requestInfo:s.requestInfo})},Le=C(function(){const e=R(),s=_(),u=i.useRef(null),c=i.useRef(null),v=i.useRef(null),[w,d]=i.useState(e.splitPercent),[f]=S(),g=z(),P=i.useMemo(()=>Promise.resolve(s.userHasAccess??!1),[s.userHasAccess]),h=e.playground?.appName!==e.extra.name,N=h||e.playground?.isUpToDate===!1,m=["playground","extra","diff","chat"],p=f.get("preview");function b(t){return!!(t&&m.includes(t))}function x(t){if(t==="playground")return ENV.EPICSHOP_DEPLOYED;if(t==="extra"&&ENV.EPICSHOP_DEPLOYED){const a=e.extra.dev.type;return a!=="browser"&&a!=="export"&&!e.extra.stackBlitzUrl}return t==="chat"?!g.product.discordChannelId:!1}const E=b(p)&&!x(p)?p:m.find(t=>!x(t))??"playground",y=m.map(t=>{const a=x(t);return{id:t,label:t,hidden:a,to:`?${$(f,t,"playground")}`}}),D=i.useMemo(()=>{const t=q(()=>({name:e.extra.name,fullPath:e.extra.fullPath}));return{h1:()=>null,InlineFile:t}},[e.extra.name,e.extra.fullPath]);return V({watchPaths:[e.extraReadme.file]}),r.jsx("div",{className:"flex max-w-full grow flex-col",children:r.jsxs("main",{ref:c,className:"flex grow flex-col sm:h-full sm:min-h-[800px] md:min-h-[unset] lg:flex-row",children:[r.jsxs("div",{className:"relative flex min-w-0 flex-none basis-full flex-col sm:col-span-1 sm:row-span-1 sm:h-full lg:basis-(--split-pct)",style:{"--split-pct":`${w}%`},ref:v,children:[r.jsx("h1",{className:"@container h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium",children:r.jsxs("div",{className:"flex h-14 items-center justify-between gap-x-2 py-2 whitespace-nowrap",children:[r.jsxs("div",{className:"flex items-center justify-start gap-x-2 uppercase",children:[r.jsx(l,{to:"/extra",className:"hover:underline",children:r.jsx("span",{children:"Extras"})}),r.jsx("span",{children:"/"}),r.jsx(l,{to:".",className:"hover:underline",children:r.jsx("span",{children:e.extra.title})})]}),N?r.jsx(G,{appName:e.extra.name,isOutdated:e.playground?.isUpToDate===!1,hideTextOnNarrow:!0,showOnboardingIndicator:h}):null]})}),r.jsxs("article",{id:e.articleId,className:"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar flex h-full w-full max-w-none flex-1 scroll-pt-6 flex-col justify-between space-y-6 overflow-y-auto p-2 sm:p-10 sm:pt-8",children:[e.extra.instructionsCode?r.jsx(L,{epicVideoInfosPromise:e.epicVideoInfosPromise,children:r.jsx("div",{className:"prose dark:prose-invert sm:prose-lg",children:r.jsx(W,{code:e.extra.instructionsCode,components:D})})}):r.jsx("div",{className:"flex h-full items-center justify-center text-lg",children:r.jsx("p",{children:"No instructions yet..."})}),r.jsxs("div",{className:"mt-auto flex justify-between",children:[e.previousExtra?r.jsxs(l,{to:`/extra/${e.previousExtra.dirName}`,"aria-label":"Previous Extra",prefetch:"intent",children:[r.jsx("span",{"aria-hidden":!0,children:"←"}),r.jsx("span",{className:"hidden xl:inline",children:" Previous"})]}):r.jsx("span",{}),e.nextExtra?r.jsxs(l,{to:`/extra/${e.nextExtra.dirName}`,"aria-label":"Next Extra",prefetch:"intent",children:[r.jsx("span",{className:"hidden xl:inline",children:"Next "}),r.jsx("span",{"aria-hidden":!0,children:"→"})]}):r.jsx("span",{})]})]},e.articleId),r.jsx(T,{elementQuery:`#${e.articleId}`},`scroll-${e.articleId}`),r.jsxs("div",{className:"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0",children:[r.jsx("div",{}),r.jsx(F,{appName:e.extra.name,relativePath:e.extraReadme.relativePath}),r.jsx(U,{prev:e.previousExtra?{to:`/extra/${e.previousExtra.dirName}`,"aria-label":"Previous Extra"}:null,next:e.nextExtra?{to:`/extra/${e.nextExtra.dirName}`,"aria-label":"Next Extra"}:null})]})]}),r.jsx("div",{role:"separator","aria-orientation":"vertical",title:"Drag to resize",className:"bg-border hover:bg-muted hidden w-1 cursor-col-resize lg:block",onMouseDown:t=>j({container:c.current,initialClientX:t.clientX,setSplitPercent:d}),onDoubleClick:()=>{d(J(50))},onTouchStart:t=>{const a=t.touches?.[0];a&&j({container:c.current,initialClientX:a.clientX,setSplitPercent:d})}}),r.jsxs(A,{className:"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",value:E,children:[r.jsx(k,{tabs:y}),r.jsxs("div",{className:"relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden",children:[r.jsx(n,{value:"playground",className:"radix-state-inactive:hidden flex min-h-0 w-full grow basis-0 items-stretch justify-center self-start",forceMount:!0,children:r.jsx(M,{appInfo:e.playground,problemAppName:e.extra.name,allApps:e.allApps??[],isUpToDate:e.playground?.isUpToDate??!1,inBrowserBrowserRef:u})}),r.jsx(n,{value:"extra",className:"radix-state-inactive:hidden flex min-h-0 w-full grow basis-0 items-stretch justify-center self-start",forceMount:!0,children:r.jsx(X,{appInfo:e.extra,inBrowserBrowserRef:u})}),r.jsx(n,{value:"diff",className:"radix-state-inactive:hidden flex h-full min-h-0 w-full grow basis-0 items-stretch justify-center self-start",children:r.jsx(H,{diff:e.diff,allApps:e.allApps,userHasAccessPromise:P})}),r.jsx(n,{value:"chat",className:"radix-state-inactive:hidden flex h-full min-h-0 w-full grow basis-0 items-stretch justify-center self-start",children:r.jsx(B,{discordPostsPromise:e.discordPostsPromise})})]})]})]})})}),Oe=I(function(){return r.jsx(O,{})});export{Oe as ErrorBoundary,Le as default,He as meta};
-//# sourceMappingURL=_extra-BZPB_nWQ.js.map

package/build/client/assets/_extra-BZPB_nWQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_extra-BZPB_nWQ.js","sources":["../../../app/routes/_app+/extra+/$extra.tsx"],"sourcesContent":["import path from 'path'\nimport { invariantResponse } from '@epic-web/invariant'\nimport { ElementScrollRestoration } from '@epic-web/restore-scroll'\nimport {\n\tgetAppByName,\n\tgetAppDisplayName,\n\tgetApps,\n\tisExtraApp,\n\tisPlaygroundApp,\n\ttype ExtraApp,\n} from '@epic-web/workshop-utils/apps.server'\nimport { getWorkshopConfig } from '@epic-web/workshop-utils/config.server'\nimport { getDiffCode } from '@epic-web/workshop-utils/diff.server'\nimport { getEpicVideoInfos } from '@epic-web/workshop-utils/epic-api.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n\ttime,\n} from '@epic-web/workshop-utils/timing.server'\nimport * as Tabs from '@radix-ui/react-tabs'\nimport slugify from '@sindresorhus/slugify'\nimport { useMemo, useRef, useState } from 'react'\nimport {\n\tLink,\n\tdata,\n\ttype HeadersFunction,\n\ttype LoaderFunctionArgs,\n\ttype MetaFunction,\n\tuseLoaderData,\n\tuseSearchParams,\n} from 'react-router'\nimport { Diff } from '#app/components/diff.tsx'\nimport { DiscordChat } from '#app/components/discord-chat.tsx'\nimport { EpicVideoInfoProvider } from '#app/components/epic-video.tsx'\nimport { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\nimport { type InBrowserBrowserRef } from '#app/components/in-browser-browser.tsx'\nimport { NavChevrons } from '#app/components/nav-chevrons.tsx'\nimport {\n\tgetPreviewSearchParams,\n\tPreviewTabsList,\n} from '#app/components/preview-tabs.tsx'\nimport { useRevalidationWS } from '#app/components/revalidation-ws.tsx'\nimport { useWorkshopConfig } from '#app/components/workshop-config.tsx'\nimport { Playground } from '#app/routes/_app+/exercise+/$exerciseNumber_.$stepNumber.$type+/__shared/playground.tsx'\nimport { Preview } from '#app/routes/_app+/exercise+/$exerciseNumber_.$stepNumber.$type+/__shared/preview.tsx'\nimport { getAppRunningState } from '#app/routes/_app+/exercise+/$exerciseNumber_.$stepNumber.$type+/__shared/utils.tsx'\nimport { EditFileOnGitHub } from '#app/routes/launch-editor.tsx'\nimport { SetAppToPlayground } from '#app/routes/set-playground.tsx'\nimport { fetchDiscordPosts } from '#app/utils/discord.server.ts'\nimport { createInlineFileComponent, Mdx } from '#app/utils/mdx.tsx'\nimport {\n\tgetRootMatchLoaderData,\n\tuseRootLoaderData,\n} from '#app/utils/root-loader.ts'\nimport { getSeoMetaTags } from '#app/utils/seo.ts'\nimport {\n\tgetSplitPercentFromRequest,\n\tsetSplitPercentCookie,\n\tstartSplitDrag,\n} from '#app/utils/split-layout.ts'\n\nfunction sortExtras(extras: ExtraApp[]) {\n\treturn extras.sort((a, b) =>\n\t\ta.title.localeCompare(b.title, undefined, {\n\t\t\tnumeric: true,\n\t\t\tsensitivity: 'base',\n\t\t}),\n\t)\n}\n\nexport const meta: MetaFunction<typeof loader> = (args) => {\n\tconst loaderData = args.data\n\tconst rootData = getRootMatchLoaderData(args.matches)\n\tif (!loaderData || !rootData) return [{ title: '🦉 | Error' }]\n\n\treturn getSeoMetaTags({\n\t\ttitle: `📚 | ${loaderData.extra.title} | ${rootData.workshopTitle}`,\n\t\tdescription: `Extra: ${loaderData.extra.title}`,\n\t\togTitle: loaderData.extra.title,\n\t\togDescription: `Extra: ${loaderData.extra.title}`,\n\t\tinstructor: rootData.instructor,\n\t\trequestInfo: rootData.requestInfo,\n\t})\n}\n\nexport async function loader({ request, params }: LoaderFunctionArgs) {\n\tconst timings = makeTimings('extraLoader')\n\tinvariantResponse(params.extra, 'extra is required')\n\n\tconst { title: workshopTitle } = getWorkshopConfig()\n\tconst cacheOptions = { request, timings }\n\tconst apps = await time(() => getApps(cacheOptions), {\n\t\ttimings,\n\t\ttype: 'getApps',\n\t\tdesc: 'getApps in extra loader',\n\t})\n\tconst extras = sortExtras(apps.filter(isExtraApp))\n\tconst playgroundApp = apps.find(isPlaygroundApp)\n\tconst extraIndex = extras.findIndex((extra) => extra.dirName === params.extra)\n\tconst extra = extras[extraIndex]\n\tif (!extra) {\n\t\tthrow new Response('Extra not found', { status: 404 })\n\t}\n\n\tconst readmeFilepath = path.join(extra.fullPath, 'README.mdx')\n\tconst previousExtra = extras[extraIndex - 1]\n\tconst nextExtra = extras[extraIndex + 1]\n\tconst reqUrl = new URL(request.url)\n\tconst app1Name = reqUrl.searchParams.get('app1')\n\tconst app2Name = reqUrl.searchParams.get('app2')\n\tconst app1 = app1Name\n\t\t? await getAppByName(app1Name)\n\t\t: (playgroundApp ?? extra)\n\tconst app2 = app2Name ? await getAppByName(app2Name) : extra\n\tconst splitPercent = getSplitPercentFromRequest(request, 50)\n\n\tconst { isRunning, portIsAvailable } = await getAppRunningState(extra)\n\n\tasync function getDiffProp() {\n\t\tif (!app1 || !app2) {\n\t\t\treturn { app1: app1?.name, app2: app2?.name, diffCode: null }\n\t\t}\n\t\tconst diffCode = await getDiffCode(app1, app2, {\n\t\t\t...cacheOptions,\n\t\t\tforceFresh: reqUrl.searchParams.get('forceFresh') === 'diff',\n\t\t}).catch((error) => {\n\t\t\tconsole.error(error)\n\t\t\treturn null\n\t\t})\n\t\treturn {\n\t\t\tapp1: app1.name,\n\t\t\tapp2: app2.name,\n\t\t\tdiffCode,\n\t\t}\n\t}\n\n\tconst allApps = apps\n\t\t.filter(\n\t\t\t(app, index, list) =>\n\t\t\t\tlist.findIndex((item) => item.name === app.name) === index,\n\t\t)\n\t\t.map((app) => ({\n\t\t\tname: app.name,\n\t\t\tdisplayName: getAppDisplayName(app, apps),\n\t\t}))\n\t\t.sort((a, b) =>\n\t\t\ta.displayName.localeCompare(b.displayName, undefined, {\n\t\t\t\tnumeric: true,\n\t\t\t\tsensitivity: 'base',\n\t\t\t}),\n\t\t)\n\n\treturn data(\n\t\t{\n\t\t\tarticleId: `workshop-${slugify(workshopTitle)}-${slugify(\n\t\t\t\textra.title,\n\t\t\t)}-extra`,\n\t\t\tsplitPercent,\n\t\t\textra: {\n\t\t\t\ttype: 'extra',\n\t\t\t\tname: extra.name,\n\t\t\t\ttitle: extra.title,\n\t\t\t\tdirName: extra.dirName,\n\t\t\t\tfullPath: extra.fullPath,\n\t\t\t\trelativePath: extra.relativePath,\n\t\t\t\tdev: extra.dev,\n\t\t\t\ttest: extra.test,\n\t\t\t\tstackBlitzUrl: extra.stackBlitzUrl,\n\t\t\t\tisRunning,\n\t\t\t\tportIsAvailable,\n\t\t\t\tepicVideoEmbeds: extra.epicVideoEmbeds,\n\t\t\t\tinstructionsCode: extra.instructionsCode,\n\t\t\t},\n\t\t\textraReadme: {\n\t\t\t\tfile: readmeFilepath,\n\t\t\t\trelativePath: path.join(extra.relativePath, 'README.mdx'),\n\t\t\t},\n\t\t\tplayground: playgroundApp\n\t\t\t\t? ({\n\t\t\t\t\t\ttype: 'playground',\n\t\t\t\t\t\tappName: playgroundApp.appName,\n\t\t\t\t\t\tname: playgroundApp.name,\n\t\t\t\t\t\ttitle: playgroundApp.title,\n\t\t\t\t\t\tfullPath: playgroundApp.fullPath,\n\t\t\t\t\t\tdev: playgroundApp.dev,\n\t\t\t\t\t\ttest: playgroundApp.test,\n\t\t\t\t\t\tstackBlitzUrl: playgroundApp.stackBlitzUrl,\n\t\t\t\t\t\tisUpToDate: playgroundApp.isUpToDate,\n\t\t\t\t\t\t...(await getAppRunningState(playgroundApp)),\n\t\t\t\t\t} as const)\n\t\t\t\t: null,\n\t\t\tallApps,\n\t\t\tdiff: getDiffProp(),\n\t\t\tdiscordPostsPromise: fetchDiscordPosts({ request }),\n\t\t\tpreviousExtra: previousExtra\n\t\t\t\t? { dirName: previousExtra.dirName, title: previousExtra.title }\n\t\t\t\t: null,\n\t\t\tnextExtra: nextExtra\n\t\t\t\t? { dirName: nextExtra.dirName, title: nextExtra.title }\n\t\t\t\t: null,\n\t\t\tepicVideoInfosPromise: getEpicVideoInfos(extra.epicVideoEmbeds, {\n\t\t\t\trequest,\n\t\t\t}),\n\t\t},\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Server-Timing': getServerTimeHeader(timings),\n\t\t\t},\n\t\t},\n\t)\n}\n\nexport const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {\n\tconst headers = {\n\t\t'Cache-Control': loaderHeaders.get('Cache-Control') ?? '',\n\t\t'Server-Timing': combineServerTimings(loaderHeaders, parentHeaders),\n\t}\n\treturn headers\n}\n\nexport default function ExtraRoute() {\n\tconst data = useLoaderData<typeof loader>()\n\tconst rootData = useRootLoaderData()\n\tconst inBrowserBrowserRef = useRef<InBrowserBrowserRef>(null)\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst leftPaneRef = useRef<HTMLDivElement>(null)\n\tconst [splitPercent, setSplitPercent] = useState<number>(data.splitPercent)\n\tconst [searchParams] = useSearchParams()\n\tconst workshopConfig = useWorkshopConfig()\n\tconst userHasAccessPromise = useMemo(\n\t\t() => Promise.resolve(rootData.userHasAccess ?? false),\n\t\t[rootData.userHasAccess],\n\t)\n\tconst showPlaygroundIndicator = data.playground?.appName !== data.extra.name\n\tconst shouldShowSetPlayground =\n\t\tshowPlaygroundIndicator || data.playground?.isUpToDate === false\n\tconst tabs = ['playground', 'extra', 'diff', 'chat'] as const\n\tconst preview = searchParams.get('preview')\n\n\tfunction isValidPreview(\n\t\tvalue: string | null,\n\t): value is (typeof tabs)[number] {\n\t\treturn Boolean(value && tabs.includes(value as (typeof tabs)[number]))\n\t}\n\n\tfunction shouldHideTab(tab: (typeof tabs)[number]) {\n\t\tif (tab === 'playground') {\n\t\t\treturn ENV.EPICSHOP_DEPLOYED\n\t\t}\n\t\tif (tab === 'extra') {\n\t\t\tif (ENV.EPICSHOP_DEPLOYED) {\n\t\t\t\tconst devType = data.extra.dev.type\n\t\t\t\treturn (\n\t\t\t\t\tdevType !== 'browser' &&\n\t\t\t\t\tdevType !== 'export' &&\n\t\t\t\t\t!data.extra.stackBlitzUrl\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t\tif (tab === 'chat') {\n\t\t\treturn !workshopConfig.product.discordChannelId\n\t\t}\n\t\treturn false\n\t}\n\n\tconst activeTab =\n\t\tisValidPreview(preview) && !shouldHideTab(preview)\n\t\t\t? preview\n\t\t\t: (tabs.find((tab) => !shouldHideTab(tab)) ?? 'playground')\n\n\tconst previewTabs = tabs.map((tab) => {\n\t\tconst hidden = shouldHideTab(tab)\n\t\treturn {\n\t\t\tid: tab,\n\t\t\tlabel: tab,\n\t\t\thidden,\n\t\t\tto: `?${getPreviewSearchParams(searchParams, tab, 'playground')}`,\n\t\t}\n\t})\n\n\t// Create MDX components with extra-specific InlineFile\n\tconst mdxComponents = useMemo(() => {\n\t\tconst InlineFile = createInlineFileComponent(() => ({\n\t\t\tname: data.extra.name,\n\t\t\tfullPath: data.extra.fullPath,\n\t\t}))\n\t\treturn {\n\t\t\t// we'll render the title ourselves thank you\n\t\t\th1: () => null,\n\t\t\tInlineFile,\n\t\t}\n\t}, [data.extra.name, data.extra.fullPath])\n\n\tuseRevalidationWS({\n\t\twatchPaths: [data.extraReadme.file],\n\t})\n\n\treturn (\n\t\t<div className=\"flex max-w-full grow flex-col\">\n\t\t\t<main\n\t\t\t\tref={containerRef}\n\t\t\t\tclassName=\"flex grow flex-col sm:h-full sm:min-h-[800px] md:min-h-[unset] lg:flex-row\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"relative flex min-w-0 flex-none basis-full flex-col sm:col-span-1 sm:row-span-1 sm:h-full lg:basis-(--split-pct)\"\n\t\t\t\t\tstyle={{ ['--split-pct' as any]: `${splitPercent}%` }}\n\t\t\t\t\tref={leftPaneRef}\n\t\t\t\t>\n\t\t\t\t\t<h1 className=\"@container h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium\">\n\t\t\t\t\t\t<div className=\"flex h-14 items-center justify-between gap-x-2 py-2 whitespace-nowrap\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-start gap-x-2 uppercase\">\n\t\t\t\t\t\t\t\t<Link to=\"/extra\" className=\"hover:underline\">\n\t\t\t\t\t\t\t\t\t<span>Extras</span>\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t<span>/</span>\n\t\t\t\t\t\t\t\t<Link to=\".\" className=\"hover:underline\">\n\t\t\t\t\t\t\t\t\t<span>{data.extra.title}</span>\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{shouldShowSetPlayground ? (\n\t\t\t\t\t\t\t\t<SetAppToPlayground\n\t\t\t\t\t\t\t\t\tappName={data.extra.name}\n\t\t\t\t\t\t\t\t\tisOutdated={data.playground?.isUpToDate === false}\n\t\t\t\t\t\t\t\t\thideTextOnNarrow\n\t\t\t\t\t\t\t\t\tshowOnboardingIndicator={showPlaygroundIndicator}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</h1>\n\t\t\t\t\t<article\n\t\t\t\t\t\tid={data.articleId}\n\t\t\t\t\t\tkey={data.articleId}\n\t\t\t\t\t\tclassName=\"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar flex h-full w-full max-w-none flex-1 scroll-pt-6 flex-col justify-between space-y-6 overflow-y-auto p-2 sm:p-10 sm:pt-8\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{data.extra.instructionsCode ? (\n\t\t\t\t\t\t\t<EpicVideoInfoProvider\n\t\t\t\t\t\t\t\tepicVideoInfosPromise={data.epicVideoInfosPromise}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"prose dark:prose-invert sm:prose-lg\">\n\t\t\t\t\t\t\t\t\t<Mdx\n\t\t\t\t\t\t\t\t\t\tcode={data.extra.instructionsCode}\n\t\t\t\t\t\t\t\t\t\tcomponents={mdxComponents}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</EpicVideoInfoProvider>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"flex h-full items-center justify-center text-lg\">\n\t\t\t\t\t\t\t\t<p>No instructions yet...</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"mt-auto flex justify-between\">\n\t\t\t\t\t\t\t{data.previousExtra ? (\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\tto={`/extra/${data.previousExtra.dirName}`}\n\t\t\t\t\t\t\t\t\taria-label=\"Previous Extra\"\n\t\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span aria-hidden>←</span>\n\t\t\t\t\t\t\t\t\t<span className=\"hidden xl:inline\"> Previous</span>\n\t\t\t\t\t\t\t\t</Link>\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)}\n\t\t\t\t\t\t\t{data.nextExtra ? (\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\tto={`/extra/${data.nextExtra.dirName}`}\n\t\t\t\t\t\t\t\t\taria-label=\"Next Extra\"\n\t\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"hidden xl:inline\">Next </span>\n\t\t\t\t\t\t\t\t\t<span aria-hidden>→</span>\n\t\t\t\t\t\t\t\t</Link>\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)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</article>\n\t\t\t\t\t<ElementScrollRestoration\n\t\t\t\t\t\telementQuery={`#${data.articleId}`}\n\t\t\t\t\t\tkey={`scroll-${data.articleId}`}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0\">\n\t\t\t\t\t\t<div />\n\t\t\t\t\t\t<EditFileOnGitHub\n\t\t\t\t\t\t\tappName={data.extra.name}\n\t\t\t\t\t\t\trelativePath={data.extraReadme.relativePath}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<NavChevrons\n\t\t\t\t\t\t\tprev={\n\t\t\t\t\t\t\t\tdata.previousExtra\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\tto: `/extra/${data.previousExtra.dirName}`,\n\t\t\t\t\t\t\t\t\t\t\t'aria-label': 'Previous Extra',\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tnext={\n\t\t\t\t\t\t\t\tdata.nextExtra\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\tto: `/extra/${data.nextExtra.dirName}`,\n\t\t\t\t\t\t\t\t\t\t\t'aria-label': 'Next Extra',\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\trole=\"separator\"\n\t\t\t\t\taria-orientation=\"vertical\"\n\t\t\t\t\ttitle=\"Drag to resize\"\n\t\t\t\t\tclassName=\"bg-border hover:bg-muted hidden w-1 cursor-col-resize lg:block\"\n\t\t\t\t\tonMouseDown={(event) =>\n\t\t\t\t\t\tstartSplitDrag({\n\t\t\t\t\t\t\tcontainer: containerRef.current,\n\t\t\t\t\t\t\tinitialClientX: event.clientX,\n\t\t\t\t\t\t\tsetSplitPercent,\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t\tonDoubleClick={() => {\n\t\t\t\t\t\tsetSplitPercent(setSplitPercentCookie(50))\n\t\t\t\t\t}}\n\t\t\t\t\tonTouchStart={(event) => {\n\t\t\t\t\t\tconst firstTouch = event.touches?.[0]\n\t\t\t\t\t\tif (!firstTouch) return\n\t\t\t\t\t\tstartSplitDrag({\n\t\t\t\t\t\t\tcontainer: containerRef.current,\n\t\t\t\t\t\t\tinitialClientX: firstTouch.clientX,\n\t\t\t\t\t\t\tsetSplitPercent,\n\t\t\t\t\t\t})\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<Tabs.Root\n\t\t\t\t\tclassName=\"relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\"\n\t\t\t\t\tvalue={activeTab}\n\t\t\t\t>\n\t\t\t\t\t<PreviewTabsList tabs={previewTabs} />\n\t\t\t\t\t<div className=\"relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden\">\n\t\t\t\t\t\t<Tabs.Content\n\t\t\t\t\t\t\tvalue=\"playground\"\n\t\t\t\t\t\t\tclassName=\"radix-state-inactive:hidden flex min-h-0 w-full grow basis-0 items-stretch justify-center self-start\"\n\t\t\t\t\t\t\tforceMount\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Playground\n\t\t\t\t\t\t\t\tappInfo={data.playground}\n\t\t\t\t\t\t\t\tproblemAppName={data.extra.name}\n\t\t\t\t\t\t\t\tallApps={data.allApps ?? []}\n\t\t\t\t\t\t\t\tisUpToDate={data.playground?.isUpToDate ?? false}\n\t\t\t\t\t\t\t\tinBrowserBrowserRef={inBrowserBrowserRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tabs.Content>\n\t\t\t\t\t\t<Tabs.Content\n\t\t\t\t\t\t\tvalue=\"extra\"\n\t\t\t\t\t\t\tclassName=\"radix-state-inactive:hidden flex min-h-0 w-full grow basis-0 items-stretch justify-center self-start\"\n\t\t\t\t\t\t\tforceMount\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Preview\n\t\t\t\t\t\t\t\tappInfo={data.extra}\n\t\t\t\t\t\t\t\tinBrowserBrowserRef={inBrowserBrowserRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tabs.Content>\n\t\t\t\t\t\t<Tabs.Content\n\t\t\t\t\t\t\tvalue=\"diff\"\n\t\t\t\t\t\t\tclassName=\"radix-state-inactive:hidden flex h-full min-h-0 w-full grow basis-0 items-stretch justify-center self-start\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Diff\n\t\t\t\t\t\t\t\tdiff={data.diff}\n\t\t\t\t\t\t\t\tallApps={data.allApps}\n\t\t\t\t\t\t\t\tuserHasAccessPromise={userHasAccessPromise}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tabs.Content>\n\t\t\t\t\t\t<Tabs.Content\n\t\t\t\t\t\t\tvalue=\"chat\"\n\t\t\t\t\t\t\tclassName=\"radix-state-inactive:hidden flex h-full min-h-0 w-full grow basis-0 items-stretch justify-center self-start\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DiscordChat discordPostsPromise={data.discordPostsPromise} />\n\t\t\t\t\t\t</Tabs.Content>\n\t\t\t\t\t</div>\n\t\t\t\t</Tabs.Root>\n\t\t\t</main>\n\t\t</div>\n\t)\n}\n\nexport function ErrorBoundary() {\n\treturn <GeneralErrorBoundary />\n}\n"],"names":["meta","args","loaderData","data","rootData","getRootMatchLoaderData","matches","title","getSeoMetaTags","extra","workshopTitle","description","ogTitle","ogDescription","instructor","requestInfo","$extra","_UNSAFE_withComponentProps","useLoaderData","useRootLoaderData","inBrowserBrowserRef","useRef","containerRef","leftPaneRef","splitPercent","setSplitPercent","useState","searchParams","useSearchParams","workshopConfig","useWorkshopConfig","userHasAccessPromise","useMemo","Promise","resolve","userHasAccess","showPlaygroundIndicator","playground","appName","name","shouldShowSetPlayground","isUpToDate","tabs","preview","get","isValidPreview","value","Boolean","includes","shouldHideTab","tab","ENV","EPICSHOP_DEPLOYED","devType","dev","type","stackBlitzUrl","product","discordChannelId","activeTab","find","previewTabs","map","hidden","id","label","to","getPreviewSearchParams","mdxComponents","InlineFile","createInlineFileComponent","fullPath","h1","useRevalidationWS","watchPaths","extraReadme","file","jsx","className","children","jsxs","ref","style","Link","SetAppToPlayground","isOutdated","hideTextOnNarrow","showOnboardingIndicator","articleId","instructionsCode","EpicVideoInfoProvider","epicVideoInfosPromise","Mdx","code","components","previousExtra","dirName","prefetch","nextExtra","ElementScrollRestoration","elementQuery","EditFileOnGitHub","relativePath","NavChevrons","prev","next","role","onMouseDown","event","startSplitDrag","container","current","initialClientX","clientX","onDoubleClick","setSplitPercentCookie","onTouchStart","firstTouch","touches","Tabs","PreviewTabsList","forceMount","Playground","appInfo","problemAppName","allApps","Preview","Diff","diff","DiscordChat","discordPostsPromise","ErrorBoundary","_UNSAFE_withErrorBoundaryProps","GeneralErrorBoundary"],"mappings":"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"}

package/build/client/assets/_layout-BxQPZuW6.js

@@ -1,2 +0,0 @@
-import{w as Ne,b as Z,O as ye,L as c,i as oe,u as le,p}from"./chunk-EPOLDU6W-BCLmut3y.js";import{j as e}from"./jsx-runtime-C5WNSv3b.js";import{c as u,I as v,a as x,m as D,n as L}from"./misc-DVYuZMjW.js";import{r as $}from"./index-CqIc3cxq.js";import{a as ke}from"./pe-CIZUOJMr.js";import{u as O,O as z}from"./onboarding-indicator-CVwXz3Cn.js";import{L as F}from"./product-GLsnY1u3.js";import{u as Ee}from"./revalidation-ws-BJWJviUX.js";import{D as Ce,f as Le,a as Pe,b as Se,d as _e}from"./dialog-DnpUg3VT.js";import{S as A,k as De,T as Q,a as q,b as K}from"./tooltip-Chzzs4KB.js";import{c as Y,b as Ae}from"./user-BsPobzjB.js";import{u as ie}from"./workshop-config-Zfc8zU0x.js";import{u as ce}from"./online-DiNLkgTC.js";import{u as M,g as de,p as He}from"./presence-VCvV2mg7.js";import{b as fe}from"./root-loader-BOzEMapJ.js";import{b as Ie,s as ue,c as $e,d as Be,e as he,m as h,u as Te,f as Ue}from"./progress-fKsNxmmt.js";import{T as me}from"./index-BW8stNyh.js";import"./schemas-Uj5SZtvt.js";import"./index-C_KjwKVt.js";import"./index-vDCSPjrM.js";import"./coerce-CkHW0SMv.js";function Ve(t){t.values.forEach(s=>s.stop())}function G(t,s){[...s].reverse().forEach(i=>{const o=t.getVariant(i);o&&ue(t,o),t.variantChildren&&t.variantChildren.forEach(l=>{G(l,s)})})}function We(t,s){if(Array.isArray(s))return G(t,s);if(typeof s=="string")return G(t,[s]);ue(t,s)}function ze(){const t=new Set,s={subscribe(n){return t.add(n),()=>void t.delete(n)},start(n,i){const o=[];return t.forEach(l=>{o.push(Ie(l,n,{transitionOverride:i}))}),Promise.all(o)},set(n){return t.forEach(i=>{We(i,n)})},stop(){t.forEach(n=>{Ve(n)})},mount(){return()=>{s.stop()}}};return s}function X(){const t=$e(ze);return Be(t.mount,[]),t}function Ye(t,s){function n(){return window.matchMedia(t).matches}function i(o){const l=window.matchMedia(t);return l.addEventListener("change",o),()=>{l.removeEventListener("change",o)}}return function(){return $.useSyncExternalStore(i,n,()=>s)}}const se=["opacity-70","opacity-80","opacity-90","opacity-100"],ae=["shadow-[0_0_2px_0_rgba(0,0,0,0.3)]","shadow-[0_0_4px_0_rgba(0,0,0,0.3)]","shadow-[0_0_7px_0_rgba(0,0,0,0.3)]","shadow-[0_0_10px_0_rgba(0,0,0,0.3)]"];function re(t){const s=Math.round(t*se.length-1),n=Math.round(t*ae.length-1);return u("shadow-highlight hover:opacity-100 focus:opacity-100",se[s]??"opacity-60",ae[n]??"shadow-none",t===1?"animate-pulse hover:animate-none focus:animate-none":null)}function xe({isMenuOpened:t}){const s=Y(),{users:n}=M(),{product:{displayNameShort:i}}=ie(),o=t?17:0,l=n.length-o,d=l>(t?1:0);if(!n.length)return null;const m=t&&n.length===1?e.jsx(c,{target:"_blank",rel:"noopener noreferrer",to:"https://www.youtube.com/watch?v=w6Q3mHyzn78",children:e.jsx("img",{alt:"Tiffany Tunes",className:u("h-8 w-8 rounded-full border object-cover",re(1)),src:"/img/tiffany.png"})}):null,g=`${l}${t?" more ":" "}${i} Dev${l===1?"":"s"} working now`;return e.jsx("div",{className:"flex flex-wrap items-center gap-2",children:e.jsxs(De,{children:[(d?n.slice(0,o):n).map(({user:f,score:P})=>{const y=re(P),j=Fe(f),w=f.imageUrlSmall||f.avatarUrl,_=f.hasAccess,H=j.some(k=>k.origin?.includes("localhost")),b=Qe(j),r=Re(f.loggedInProductHosts);if(f.optOut)return e.jsxs(Q,{children:[e.jsx(q,{asChild:!0,tabIndex:0,children:e.jsx("div",{className:"relative","aria-label":"Anonymous user (opted out)",children:e.jsx("div",{className:u("bg-muted flex h-8 w-8 items-center justify-center rounded-full border opacity-50"),children:e.jsx(v,{name:"User"})})})}),e.jsx(K,{children:e.jsx("span",{className:"flex flex-col items-center justify-center gap-1",children:e.jsxs("span",{className:"flex items-center gap-1.5",children:[r?e.jsx("span",{className:"text-xs",children:r}):null,"Anonymous (opted out of sharing)"]})})})]},f.id);let N;return _?N=H?"working":"referencing":N=H?"previewing":"reviewing",e.jsxs(Q,{children:[e.jsx(q,{asChild:!0,tabIndex:0,children:e.jsxs("div",{className:"relative","aria-label":f.name||`${i} Dev`,children:[w?e.jsx("img",{alt:f.name||i,className:u("h-8 w-8 rounded-full border object-cover",y),src:w}):e.jsx("div",{className:u("flex h-8 w-8 items-center justify-center rounded-full border",y),children:e.jsx(v,{name:"User"})}),b?e.jsx("span",{className:"absolute -top-1 -left-1 text-xs leading-none","aria-label":"Workshop products",children:b}):null]})}),e.jsx(K,{children:e.jsxs("span",{className:"flex flex-col items-center justify-center gap-1",children:[e.jsxs("span",{className:"flex items-center gap-1.5",children:[r?e.jsx("span",{className:"text-xs",children:r}):null,f.name||`${i} Dev`,j.length>0?` is ${N} ${P===1&&s?.id!==f.id?"with you":""} on`:null]}),j.map((k,E)=>{const C=qe(k);return C?e.jsxs("span",{className:u("flex flex-col items-center",j.length>1?"border-border mt-1 border-t pt-1 first:mt-0 first:border-t-0 first:pt-0":""),children:[C.line1?e.jsxs("span",{children:[de(k.productHost)," ",C.line1]}):null,C.line2?e.jsx("span",{className:"text-muted-foreground text-xs",children:C.line2}):null]},`${k.workshopTitle}-${E}`):null})]})})]},f.id)}),m,d?e.jsxs(Q,{children:[e.jsx(q,{asChild:!0,tabIndex:0,children:e.jsx("div",{"aria-label":g,className:u("bg-accent text-accent-foreground flex items-center justify-center rounded-full border text-xs",t?"h-8 w-8":"h-6 w-6"),children:e.jsx("span",{className:u("pointer-events-none truncate text-center",t?"w-8":"w-6"),children:t?`+${l}`:l})})}),e.jsx(K,{children:g})]}):null]})})}function Re(t){return!t||t.length===0?null:t.map(s=>He[s]).filter(Boolean).join(" ")}function Fe(t){return t.locations&&t.locations.length>0?t.locations.filter(Boolean):t.location?[t.location]:[]}function Qe(t){const s=new Set;for(const n of t)n.productHost&&s.add(n.productHost);return s.size===0?null:Array.from(s).map(n=>de(n)).filter(Boolean).join("")}function pe(t){return t.some(s=>{const n=s.relativePath.split(/[\\/]/)[0];return n==="extra"||n==="example"||n==="examples"})}const ge=Ye("(min-width: 640px)",!0),jt=Ne(function(){const s=Z(),n=Y(),i=ge(),o=ke(),[l,d]=$.useState(s.isMenuOpened);Ee({watchPaths:["./exercises/README.mdx","./extra","./example","./examples"]});function m(g){d(g),document.cookie=`es_menu_open=${g.toString()}; path=/; SameSite=Lax;`}return e.jsxs("div",{className:"flex flex-col",children:[n?null:e.jsx(Ke,{}),o&&i?null:e.jsx(Ge,{isMenuOpened:l,onMenuOpenChange:m}),e.jsxs("div",{className:u("flex grow flex-col sm:flex-row",{"h-[calc(100vh-128px-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,"h-[calc(100vh-64px-env(safe-area-inset-top)-env(safe-area-inset-bottom))] sm:h-[calc(100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))]":n,"h-[unset]":!i&&l}),children:[i?e.jsx(Xe,{isMenuOpened:l,onMenuOpenChange:m}):null,e.jsx("div",{className:u("h-full w-full max-w-full sm:max-w-[calc(100%-56px)]",l?"hidden md:block":""),children:e.jsx(ye,{})})]})]})});function qe(t){if(!t)return null;const{exercise:s}=t,n=[s?[s.exerciseNumber,s.stepNumber].filter(Boolean).map(i=>i.toString().padStart(2,"0")).join("/"):null,s?.type].filter(Boolean).join(" - ");return{line1:t.workshopTitle,line2:n}}function Ke(){const t=ge(),{product:{host:s,displayName:n}}=ie(),i=Ae(),[o,l]=O("login-button"),d=e.jsx("div",{children:ENV.EPICSHOP_DEPLOYED?e.jsxs("div",{children:["This is the deployed version. ",e.jsxs(e.Fragment,{children:[e.jsx(c,{className:"underline",target:"_blank",rel:"noopener noreferrer",to:ENV.EPICSHOP_GITHUB_REPO,children:"Run locally"})," for full experience."]})," "]}):i?e.jsxs("div",{children:[e.jsx(c,{to:"/login",className:"underline",children:"Login"})," ","or"," ",e.jsx("a",{href:`https://${s}/login`,className:"underline",children:"join for free"})," ","for the full experience."]}):null});return e.jsx("div",{className:"from-highlight to-info text-info-foreground z-10 flex h-16 items-center justify-between border-b bg-linear-to-tr pl-4",children:t?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"hidden flex-1 flex-wrap items-center gap-4 sm:flex",children:[e.jsx(F,{size:"lg",style:"monochrome"}),e.jsxs("div",{className:"flex flex-1 flex-wrap items-center",children:[e.jsxs("p",{className:"mr-2",children:["Welcome to the"," ",e.jsx(c,{to:`https://${s}`,className:"underline",target:"_blank",children:n})," ","Workshop app!"]}),d]})]}),i?null:e.jsxs("div",{className:"hidden h-full flex-col items-center sm:flex md:flex-row",children:[e.jsxs(c,{to:`https://${s}`,target:"_blank",className:"flex h-full items-center justify-center space-x-1.5 px-5 text-sm font-semibold",children:[e.jsxs("span",{className:"drop-shadow-sm",children:["Join ",n]}),e.jsx("span",{children:"↗︎"})]}),e.jsxs(c,{to:ENV.EPICSHOP_DEPLOYED?`https://${s}/login`:"/login",className:"bg-info-foreground/20 hover:bg-info-foreground/30 relative flex h-full items-center justify-center space-x-1.5 px-5 text-sm font-semibold shadow-md transition",onClick:l,children:[e.jsx(v,{name:"User",size:"lg"}),e.jsx("span",{className:"drop-shadow-sm",children:"Login"}),o?e.jsx(z,{tooltip:"Login for the full experience!",size:"sm"}):null]})]})]}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex flex-1 flex-wrap items-center gap-4 sm:hidden",children:[e.jsx("a",{href:`https://${s}`,children:e.jsx(F,{size:"lg",style:"monochrome"})}),e.jsxs(Ce,{children:[e.jsx(Le,{children:e.jsx(v,{name:"Question",size:"lg",className:"animate-pulse"})}),e.jsxs(Pe,{children:[e.jsxs(Se,{children:[e.jsx(F,{size:"lg",style:"monochrome"}),e.jsx("span",{className:"text-lg font-semibold",children:n})]}),e.jsxs(_e,{children:["Welcome to the"," ",e.jsx(c,{to:`https://${s}`,className:"underline",children:n})," ","Workshop app!"]}),d]})]})]}),i?null:e.jsxs("div",{className:"flex h-full items-center",children:[e.jsxs(c,{to:`https://${s}`,target:"_blank",className:"flex h-full items-center justify-center space-x-1.5 px-5 text-sm font-semibold",children:[e.jsx("span",{className:"drop-shadow-sm",children:"Join"}),e.jsx("span",{children:"↗︎"})]}),e.jsxs(c,{to:ENV.EPICSHOP_DEPLOYED?`https://${s}/login`:"/login",className:"bg-info-foreground/20 hover:bg-info-foreground/30 relative flex h-full items-center justify-center space-x-1.5 px-5 text-sm font-semibold shadow-md transition",onClick:l,children:[e.jsx(v,{name:"User",size:"lg"}),e.jsx("span",{className:"drop-shadow-sm",children:"Login"}),o?e.jsx(z,{tooltip:"Login for the full experience!",size:"sm"}):null]})]})]})})}const ee={hidden:{opacity:0,x:-20},visible:{opacity:1,x:0}};function je({exerciseNumber:t,children:s}){const n=Te(t);return e.jsx(h.li,{variants:ee,className:u("py-[6px] first:pt-3 last:pb-3",n?`${n} before:border-t`:null),children:e.jsx("span",{className:"inline-block pl-2",children:s})})}function B({children:t,...s}){const n=Ue(s);return e.jsx(h.li,{variants:ee,className:u("py-[6px] first:pt-3 last:pb-3",n?`${n} before:border-t`:null),children:e.jsx("span",{className:"inline-block pl-2",children:t})})}function be({children:t}){return e.jsx(h.li,{variants:ee,className:"py-[6px] first:pt-3 last:pb-3",children:e.jsx("span",{className:"inline-block pl-2",children:t})})}const Je='relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""]';function T(t,s){return x(Je,s,{"bg-foreground text-background":t})}function Ge({isMenuOpened:t,onMenuOpenChange:s}){const n=Z(),i=fe(),o=Y(),l=he(),d=oe(),m=le(),g=ce(),{users:f}=M(),[P,y]=O("account-link"),j=pe(i),w=n.extras.find(r=>r.name===n.playground.appName),_=m.pathname==="/extra"||m.pathname.startsWith("/extra/"),H=!!w&&!_,b={visible:{opacity:1,transition:{duration:.05,when:"beforeChildren",staggerChildren:.03}},hidden:{opacity:0}};return e.jsx("nav",{className:"flex w-full border-b sm:hidden",children:e.jsx("div",{className:"w-full",children:e.jsxs("div",{className:u("flex items-center",{"flex-col":t,"h-14":!t}),children:[e.jsx(ve,{title:n.workshopTitle,isMenuOpened:t,setMenuOpened:s}),t&&e.jsxs(h.div,{className:"scrollbar-thin scrollbar-thumb-scrollbar flex w-full grow flex-col justify-between overflow-x-auto p-6",initial:{opacity:0},animate:{opacity:1},children:[e.jsxs(h.ul,{variants:b,initial:"hidden",animate:"visible",className:"flex flex-col",children:[e.jsx("span",{children:e.jsx(p,{prefetch:"intent",to:"/",className:({isActive:r})=>x("relative px-2 py-0.5 pr-3 text-2xl font-bold whitespace-nowrap outline-none hover:underline focus:underline",'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":r}),children:"Home"})}),n.exercises.map(({exerciseNumber:r,title:N,steps:k})=>{const E=Number(d.exerciseNumber)===r,C=!E&&n.playground.exerciseNumber===r;return e.jsxs(je,{exerciseNumber:r,children:[e.jsxs("span",{className:"flex items-center gap-1 text-2xl font-bold",children:[e.jsx(c,{prefetch:"intent",to:D(r),className:x("relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline",'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":E}),children:N}),C?e.jsx(c,{to:L(n.playground.exerciseNumber,n.playground.stepNumber,n.playground.type),prefetch:"intent",children:"🛝"}):null]}),E?e.jsxs(h.ul,{variants:b,initial:"hidden",animate:"visible",className:"mt-2 ml-4 flex flex-col",children:[e.jsx(B,{type:"instructions",exerciseNumber:r,children:e.jsx(c,{to:D(r),prefetch:"intent",className:x('after:bg-background relative px-2 py-0.5 pr-3 text-xl font-medium whitespace-nowrap outline-none after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":!d.stepNumber}),children:"Intro"})},r),k.filter(Boolean).map(({stepNumber:a,title:U,problem:W,solution:I})=>e.jsx(B,{type:"step",stepNumber:a,exerciseNumber:r,children:e.jsxs("div",{className:"flex flex-col gap-0.5",children:[e.jsxs(c,{to:L(r,a),prefetch:"intent",className:"leading-tight font-semibold",children:[a.toString().padStart(2,"0"),"."," ",U]}),e.jsxs("div",{className:"mt-0.5 ml-3 flex gap-1",children:[W&&e.jsxs(p,{to:L(r,a,"problem"),prefetch:"intent",className:({isActive:V})=>T(V),children:["Problem",W.name===n.playground.appName?" 🛝":""]}),I&&e.jsxs(p,{to:L(r,a,"solution"),prefetch:"intent",className:({isActive:V})=>T(V),children:["Solution",I.name===n.playground.appName?" 🛝":""]})]})]})},a)),e.jsx(B,{type:"finished",exerciseNumber:r,children:e.jsx(p,{to:D(r,"finished"),prefetch:"intent",className:({isActive:a})=>x('after:bg-background relative px-2 py-0.5 pr-3 text-base font-medium whitespace-nowrap outline-none after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":a}),children:"📝 Elaboration"})})]}):null]},r)}),j?e.jsxs("span",{children:[e.jsxs("span",{className:"flex items-center gap-1 text-2xl font-bold",children:[e.jsx(p,{to:"/extra",prefetch:"intent",className:({isActive:r})=>x("relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline",'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":r}),children:"📚 Extras"}),H&&w?e.jsx(c,{to:`/extra/${w.dirName}`,prefetch:"intent",children:"🛝"}):null]}),_&&n.extras.length?e.jsx(h.ul,{variants:b,initial:"hidden",animate:"visible",className:"mt-2 ml-4 flex flex-col",children:n.extras.map(r=>e.jsx(be,{children:e.jsxs(p,{to:`/extra/${r.dirName}`,prefetch:"intent",className:({isActive:N})=>T(N,"leading-tight font-semibold"),children:[r.title,r.name===n.playground.appName?" 🛝":""]})},r.dirName))}):null]}):null]}),e.jsx("div",{className:"mt-6",children:e.jsx(p,{to:"/finished",className:({isActive:r})=>x("relative text-lg font-bold whitespace-nowrap outline-none hover:underline focus:underline",{'after:bg-background bg-foreground text-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""]':r}),children:"📝 Workshop Feedback"})})]}),e.jsx("div",{className:"grow"}),g?null:e.jsx(A,{content:t?null:"You are offline",children:e.jsx("div",{className:u("flex h-14 animate-pulse items-center justify-start p-4",t?"w-full border-t":"border-l"),children:e.jsx(v,{name:"WifiNoConnection",className:"text-foreground-destructive",children:t?"You are offline":null})})}),e.jsx("div",{className:u("flex items-center justify-start p-4",t&&f.length>4?"min-h-14":"h-14",t?"w-full border-t":"border-l"),children:e.jsx(xe,{isMenuOpened:t})}),ENV.EPICSHOP_DEPLOYED?null:o?e.jsx(A,{content:t?null:"Your account",children:e.jsxs(c,{className:u("relative flex h-14 shrink-0 items-center justify-start space-x-3 px-4 py-4 text-center no-underline hover:underline",{"border-l":!t,"w-full border-t":t}),to:"/account",onClick:y,children:[o.imageUrlSmall?e.jsx("img",{alt:o.name??o.email,src:o.imageUrlSmall,className:"h-full rounded-full"}):e.jsx(v,{name:"User",className:"shrink-0",size:"lg"}),t?e.jsx(h.div,{className:"flex items-center whitespace-nowrap",initial:{opacity:0},animate:{opacity:1},children:"Your Account"}):e.jsx("span",{className:"sr-only",children:"Your account"}),P?e.jsx(z,{tooltip:"View your account and preferences",size:"sm"}):null]})}):null,ENV.EPICSHOP_DEPLOYED?null:o&&l?e.jsx(A,{content:t?null:"Continue to next lesson",children:e.jsxs(c,{to:l,prefetch:"intent",className:x("flex h-14 w-full items-center space-x-3 border-l px-4 py-4 pl-[18px] no-underline hover:underline"),state:{from:"continue next lesson button"},children:[e.jsx(v,{name:"FastForward",className:"shrink-0",size:"md"}),t?e.jsx(h.div,{className:"flex items-center whitespace-nowrap",initial:{opacity:0},animate:{opacity:1},children:"Continue to next lesson"}):e.jsx("span",{className:"sr-only",children:"Continue to next lesson"})]})}):null,e.jsx("div",{className:u("flex h-14 w-14 items-center justify-center self-start p-4 sm:mb-4 sm:w-full",{"w-full border-t":t,"border-l":!t}),children:e.jsx(me,{})})]})})})}const J=400;function Xe({isMenuOpened:t,onMenuOpenChange:s}){const n=Z(),i=fe(),o=Y(),l=he(),d=oe(),m=le(),g=ce(),{users:f}=M(),[P,y]=O("account-link"),j=pe(i),w=n.extras.find(a=>a.name===n.playground.appName),_=m.pathname==="/extra"||m.pathname.startsWith("/extra/"),H=!!w&&!_,b=n.exercises.find(a=>a.exerciseNumber===Number(d.exerciseNumber)),r=d.type==="solution"?b?.solutions.find(a=>a.stepNumber===Number(d.stepNumber)):d.type==="problem"?b?.problems.find(a=>a.stepNumber===Number(d.stepNumber)):null,N=X(),k={close:{width:56},open:{width:J}},E={visible:{opacity:1,transition:{duration:.05,when:"beforeChildren",staggerChildren:.03}},hidden:{opacity:0}},C=$.useCallback(()=>{typeof window>"u"||window.dispatchEvent(new CustomEvent("toggle-keyboard-shortcuts"))},[]);return e.jsx("nav",{className:"hidden border-r sm:flex",children:e.jsx(h.div,{initial:t?"open":"close",variants:k,animate:N,children:e.jsxs("div",{className:"flex h-full flex-col items-center justify-between",children:[e.jsx(ve,{title:n.workshopTitle,menuControls:N,isMenuOpened:t,setMenuOpened:s}),t&&e.jsxs(h.div,{style:{width:J},className:"scrollbar-thin scrollbar-thumb-scrollbar flex grow flex-col justify-between overflow-y-auto p-6",initial:{opacity:0},animate:{opacity:1},children:[e.jsxs(h.ul,{variants:E,initial:"hidden",animate:"visible",className:"flex flex-col",children:[e.jsx("span",{children:e.jsx(p,{prefetch:"intent",to:"/",className:({isActive:a})=>x("relative px-2 py-0.5 pr-3 text-2xl font-bold whitespace-nowrap outline-none hover:underline focus:underline",'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":a}),children:"Home"})}),n.exercises.map(({exerciseNumber:a,title:U,steps:W})=>{const I=Number(d.exerciseNumber)===a,V=!I&&n.playground.exerciseNumber===a;return e.jsxs(je,{exerciseNumber:a,children:[e.jsxs("span",{className:"flex items-center gap-1 text-2xl font-bold",children:[e.jsx(c,{prefetch:"intent",to:D(a),className:x("relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline",'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":I}),children:U}),V?e.jsx(c,{to:L(n.playground.exerciseNumber,n.playground.stepNumber,n.playground.type),prefetch:"intent",children:"🛝"}):null]}),I?e.jsxs(h.ul,{variants:E,initial:"hidden",animate:"visible",className:"mt-2 ml-4 flex flex-col",children:[e.jsx(B,{type:"instructions",exerciseNumber:a,children:e.jsx(c,{to:D(a),prefetch:"intent",className:x('after:bg-background relative px-2 py-0.5 pr-3 text-xl font-medium whitespace-nowrap outline-none after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":!d.stepNumber}),children:"Intro"})},a),W.filter(Boolean).map(({stepNumber:S,title:we,problem:te,solution:ne})=>e.jsx(B,{type:"step",stepNumber:S,exerciseNumber:a,children:e.jsxs("div",{className:"flex flex-col gap-0.5",children:[e.jsxs(c,{to:L(a,S),prefetch:"intent",className:"leading-tight font-semibold",children:[S.toString().padStart(2,"0"),"."," ",we]}),e.jsxs("div",{className:"mt-0.5 ml-3 flex gap-1",children:[te&&e.jsxs(p,{to:L(a,S,"problem"),prefetch:"intent",className:({isActive:R})=>T(R),children:["Problem",te.name===n.playground.appName?" 🛝":""]}),ne&&e.jsxs(p,{to:L(a,S,"solution"),prefetch:"intent",className:({isActive:R})=>T(R),children:["Solution",ne.name===n.playground.appName?" 🛝":""]})]})]})},S)),e.jsx(B,{type:"finished",exerciseNumber:a,children:e.jsx(p,{to:D(a,"finished"),prefetch:"intent",className:({isActive:S})=>x('after:bg-background relative px-2 py-0.5 pr-3 text-base font-medium whitespace-nowrap outline-none after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":S}),children:"📝 Elaboration"})})]}):null]},a)}),j?e.jsxs("span",{children:[e.jsxs("span",{className:"flex items-center gap-1 text-2xl font-bold",children:[e.jsx(p,{to:"/extra",prefetch:"intent",className:({isActive:a})=>x("relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline",'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""] hover:underline focus:underline',{"bg-foreground text-background":a}),children:"📚 Extras"}),H&&w?e.jsx(c,{to:`/extra/${w.dirName}`,prefetch:"intent",children:"🛝"}):null]}),_&&n.extras.length?e.jsx(h.ul,{variants:E,initial:"hidden",animate:"visible",className:"mt-2 ml-4 flex flex-col",children:n.extras.map(a=>e.jsx(be,{children:e.jsxs(p,{to:`/extra/${a.dirName}`,prefetch:"intent",className:({isActive:U})=>T(U,"leading-tight font-semibold"),children:[a.title,a.name===n.playground.appName?" 🛝":""]})},a.dirName))}):null]}):null]}),e.jsx("div",{className:"mt-6",children:e.jsx(p,{to:"/finished",className:({isActive:a})=>x("relative text-lg font-bold whitespace-nowrap outline-none hover:underline focus:underline",{'after:bg-background bg-foreground text-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[""]':a}),children:"📝 Workshop Feedback"})})]}),!t&&e.jsx("div",{className:"flex grow flex-col justify-center",children:e.jsxs("div",{className:"orientation-sideways w-full font-mono text-sm leading-none font-medium uppercase",children:[b?.title?e.jsx(c,{to:D(Number(d.exerciseNumber)),children:b.title}):null,b?.title&&r?.title?" — ":null,r?.title?e.jsx(c,{to:L(Number(d.exerciseNumber),r.stepNumber),children:r.title}):null]})}),g?null:e.jsx(A,{content:t?null:"You are offline",children:e.jsx("div",{className:u("flex w-full animate-pulse items-center border-t p-4",t?"justify-start":"justify-center"),children:e.jsx(v,{name:"WifiNoConnection",className:"text-foreground-destructive",children:t?e.jsx("span",{className:"whitespace-nowrap",children:"You are offline"}):null})})}),e.jsx("div",{className:u("flex w-full items-center justify-start border-t p-4 transition-[height]",t&&f.length>4?"h-28":"h-14"),style:t?{width:J}:{},children:e.jsx(xe,{isMenuOpened:t})}),ENV.EPICSHOP_DEPLOYED?null:o?e.jsx(A,{content:t?null:"Your account",children:e.jsxs(c,{className:"relative flex h-14 w-full shrink-0 items-center justify-start space-x-3 border-t px-4 py-4 text-center no-underline hover:underline",to:"/account",onClick:y,children:[o.imageUrlSmall?e.jsx("img",{alt:o.name??o.email,src:o.imageUrlSmall,className:"h-full rounded-full"}):e.jsx(v,{name:"User",className:"shrink-0",size:"lg"}),t?e.jsx(h.div,{className:"flex items-center whitespace-nowrap",initial:{opacity:0},animate:{opacity:1},children:"Your Account"}):e.jsx("span",{className:"sr-only",children:"Your account"}),P?e.jsx(z,{tooltip:"View your account and preferences",size:"sm"}):null]})}):null,ENV.EPICSHOP_DEPLOYED?null:o&&l?e.jsx(A,{content:t?null:"Continue to next lesson",children:e.jsxs(c,{to:l,prefetch:"intent",className:x("flex h-14 w-full items-center space-x-3 border-t px-4 py-4 pl-[18px] no-underline hover:underline"),state:{from:"continue next lesson button"},children:[e.jsx(v,{name:"FastForward",className:"shrink-0",size:"md"}),t?e.jsx(h.div,{className:"flex items-center whitespace-nowrap",initial:{opacity:0},animate:{opacity:1},children:"Continue to next lesson"}):e.jsx("span",{className:"sr-only",children:"Continue to next lesson"})]})}):null,e.jsx("div",{className:"mb-4 w-full self-start border-t pt-[15px] pl-3",children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(me,{}),t?e.jsx(A,{content:"Keyboard shortcuts (press ?)",children:e.jsx("button",{type:"button","aria-label":"Keyboard shortcuts",onClick:C,className:"text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring flex h-8 w-8 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-offset-2",children:e.jsx(v,{name:"Question",size:"md"})})}):null]})})]})})})}function ve({title:t,isMenuOpened:s,setMenuOpened:n,menuControls:i}){const o=$.useRef(s),l=$.useRef(null),d={open:{d:"M3.06061 2.99999L21.0606 21"},closed:{d:"M0 9.5L24 9.5"}},m={open:{d:"M3.00006 21.0607L21 3.06064"},moving:{d:"M0 14.5L24 14.5"},closed:{d:"M0 14.5L15 14.5"}},g=X(),f=X();async function P(){i?.start(s?"close":"open"),n(!s),s?(g.start(d.closed),await f.start(m.moving),f.start(m.closed)):(await f.start(m.moving),g.start(d.open),f.start(m.open))}return $.useEffect(()=>{if(!s)return;function y(j){if(j.key!=="Escape"||j.defaultPrevented)return;!!document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]')||l.current?.click()}return document.addEventListener("keydown",y),()=>document.removeEventListener("keydown",y)},[s]),e.jsxs("div",{className:u("relative inline-flex h-14 shrink-0 items-center justify-between overflow-hidden border-r sm:w-full sm:border-r-0 sm:border-b",{"w-full":s}),children:[e.jsx("button",{ref:l,className:"flex h-14 w-14 items-center justify-center","aria-label":"Open Navigation menu",onClick:P,children:e.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",children:[e.jsx(h.path,{...d[o.current?"open":"closed"],animate:g,transition:{duration:.2},stroke:"currentColor",strokeWidth:1.5}),e.jsx(h.path,{...m[o.current?"open":"closed"],animate:f,transition:{duration:.2},stroke:"currentColor",strokeWidth:1.5})]})}),s&&e.jsx(h.p,{transition:{delay:.2},initial:{opacity:0,y:5},animate:{opacity:1,y:0},className:"absolute right-5 font-mono text-sm whitespace-nowrap uppercase",children:e.jsx(c,{to:"/",children:t})})]})}export{jt as default};
-//# sourceMappingURL=_layout-BxQPZuW6.js.map

package/build/client/assets/_layout-BxQPZuW6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_layout-BxQPZuW6.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/components/media-query.ts","../../../app/routes/_app+/_layout.tsx"],"sourcesContent":["import { animateVisualElement, setTarget } from 'motion-dom';\nimport { invariant } from 'motion-utils';\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//# sourceMappingURL=animation-controls.mjs.map\n","\"use client\";\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { animationControls } from './animation-controls.mjs';\n\n/**\n * Creates `LegacyAnimationControls`, which can be used to manually start, stop\n * and sequence animations on one or more components.\n *\n * The returned `LegacyAnimationControls` 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//# sourceMappingURL=use-animation.mjs.map\n","import { useSyncExternalStore } from 'react'\n\nexport function makeMediaQueryStore(\n\tmediaQuery: string,\n\tserverSnapshot: boolean,\n) {\n\tfunction getSnapshot() {\n\t\treturn window.matchMedia(mediaQuery).matches\n\t}\n\n\tfunction subscribe(callback: () => void) {\n\t\tconst mediaQueryList = window.matchMedia(mediaQuery)\n\t\tmediaQueryList.addEventListener('change', callback)\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener('change', callback)\n\t\t}\n\t}\n\n\treturn function useMediaQuery() {\n\t\treturn useSyncExternalStore(subscribe, getSnapshot, () => serverSnapshot)\n\t}\n}\n","import {\n\textractNumbersAndTypeFromAppNameOrPath,\n\tgetApps,\n\tgetExercises,\n\tgetPlaygroundAppName,\n\tisExtraApp,\n} from '@epic-web/workshop-utils/apps.server'\nimport { getWorkshopConfig } from '@epic-web/workshop-utils/config.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n} from '@epic-web/workshop-utils/timing.server'\nimport { clsx } from 'clsx'\nimport { motion, useAnimationControls } from 'framer-motion'\nimport * as React from 'react'\nimport {\n\tLink,\n\tNavLink,\n\tOutlet,\n\tuseLoaderData,\n\tuseLocation,\n\tuseParams,\n\tdata,\n\ttype HeadersFunction,\n\ttype LoaderFunctionArgs,\n} from 'react-router'\nimport { useHydrated } from 'remix-utils/use-hydrated'\nimport { Icon } from '#app/components/icons.tsx'\nimport { makeMediaQueryStore } from '#app/components/media-query.ts'\nimport {\n\tOnboardingBadge,\n\tuseOnboardingIndicator,\n} from '#app/components/onboarding-indicator.tsx'\nimport { Logo } from '#app/components/product.tsx'\nimport { useRevalidationWS } from '#app/components/revalidation-ws.tsx'\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTrigger,\n} from '#app/components/ui/dialog.tsx'\nimport {\n\tSimpleTooltip,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from '#app/components/ui/tooltip.tsx'\nimport { useOptionalUser, useUserHasAccess } from '#app/components/user.tsx'\nimport { useWorkshopConfig } from '#app/components/workshop-config.tsx'\nimport { cn, getExercisePath, getExerciseStepPath } from '#app/utils/misc.tsx'\nimport { useIsOnline } from '#app/utils/online.ts'\nimport {\n\tgetProductHostEmoji,\n\tproductHostEmojis,\n\tusePresence,\n\ttype Location,\n\ttype User,\n} from '#app/utils/presence.tsx'\nimport { useApps } from '#app/utils/root-loader.ts'\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('appLayoutLoader')\n\tconst { title: workshopTitle } = getWorkshopConfig()\n\tconst [exercises, playgroundAppName, apps] = await Promise.all([\n\t\tgetExercises({ request, timings }),\n\t\tgetPlaygroundAppName(),\n\t\tgetApps({ request, timings }),\n\t])\n\n\tconst playgroundNumbersAndType = extractNumbersAndTypeFromAppNameOrPath(\n\t\tplaygroundAppName ?? '',\n\t)\n\tconst playground = {\n\t\tappName: playgroundAppName,\n\t\texerciseNumber: Number(playgroundNumbersAndType?.exerciseNumber),\n\t\tstepNumber: Number(playgroundNumbersAndType?.stepNumber),\n\t\ttype: playgroundNumbersAndType?.type,\n\t}\n\n\tconst result = data(\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\tproblem: problem\n\t\t\t\t\t\t? { name: problem.name, title: problem.title }\n\t\t\t\t\t\t: null,\n\t\t\t\t\tsolution: solution\n\t\t\t\t\t\t? { name: solution.name, title: solution.title }\n\t\t\t\t\t\t: null,\n\t\t\t\t})),\n\t\t\t})),\n\t\t\textras: apps\n\t\t\t\t.filter(isExtraApp)\n\t\t\t\t.sort((a, b) =>\n\t\t\t\t\ta.title.localeCompare(b.title, undefined, {\n\t\t\t\t\t\tnumeric: true,\n\t\t\t\t\t\tsensitivity: 'base',\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t\t.map((extra) => ({\n\t\t\t\t\tdirName: extra.dirName,\n\t\t\t\t\ttitle: extra.title,\n\t\t\t\t\tname: extra.name,\n\t\t\t\t})),\n\t\t\tplayground,\n\t\t\tisMenuOpened:\n\t\t\t\trequest.headers.get('cookie')?.includes('es_menu_open=true') ?? false,\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-highlight hover:opacity-100 focus:opacity-100',\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 {\n\t\tproduct: { displayNameShort },\n\t} = useWorkshopConfig()\n\tconst limit = isMenuOpened ? 17 : 0\n\tconst numberOverLimit = users.length - limit\n\tconst shouldShowNumberOverLimit = numberOverLimit > (isMenuOpened ? 1 : 0)\n\n\tif (!users.length) return null\n\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}${displayNameShort} 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{(shouldShowNumberOverLimit ? users.slice(0, limit) : users).map(\n\t\t\t\t\t({ user, score }) => {\n\t\t\t\t\t\tconst scoreClassNames = getScoreClassNames(score)\n\t\t\t\t\t\tconst locations = getUserLocations(user)\n\t\t\t\t\t\tconst imageUrl = user.imageUrlSmall || user.avatarUrl\n\t\t\t\t\t\tconst hasAccess = user.hasAccess\n\t\t\t\t\t\tconst local = locations.some((loc) =>\n\t\t\t\t\t\t\tloc.origin?.includes('localhost'),\n\t\t\t\t\t\t)\n\t\t\t\t\t\tconst productHostEmojis = getUniqueProductHostEmojis(locations)\n\t\t\t\t\t\tconst loggedInEmojis = getLoggedInProductEmojis(\n\t\t\t\t\t\t\tuser.loggedInProductHosts,\n\t\t\t\t\t\t)\n\n\t\t\t\t\t\t// Handle opted-out users\n\t\t\t\t\t\tif (user.optOut) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Tooltip key={user.id}>\n\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild tabIndex={0}>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"relative\"\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"Anonymous user (opted out)\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'bg-muted flex h-8 w-8 items-center justify-center rounded-full border opacity-50',\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<Icon name=\"User\" />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t<TooltipContent>\n\t\t\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\t\t<span className=\"flex items-center gap-1.5\">\n\t\t\t\t\t\t\t\t\t\t\t\t{loggedInEmojis ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">{loggedInEmojis}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t\t\tAnonymous (opted out of sharing)\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet doingLabel: string\n\t\t\t\t\t\tif (hasAccess) {\n\t\t\t\t\t\t\tdoingLabel = local ? 'working' : 'referencing'\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdoingLabel = local ? 'previewing' : 'reviewing'\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Tooltip key={user.id}>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild tabIndex={0}>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName=\"relative\"\n\t\t\t\t\t\t\t\t\t\taria-label={user.name || `${displayNameShort} Dev`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{imageUrl ? (\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\talt={user.name || displayNameShort}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\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\t\t\tscoreClassNames,\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\tsrc={imageUrl}\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\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\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\t\t\tscoreClassNames,\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<Icon name=\"User\" />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{productHostEmojis ? (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"absolute -top-1 -left-1 text-xs leading-none\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Workshop products\"\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{productHostEmojis}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>\n\t\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\t<span className=\"flex items-center gap-1.5\">\n\t\t\t\t\t\t\t\t\t\t\t{loggedInEmojis ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">{loggedInEmojis}</span>\n\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t\t{user.name || `${displayNameShort} Dev`}\n\t\t\t\t\t\t\t\t\t\t\t{locations.length > 0\n\t\t\t\t\t\t\t\t\t\t\t\t? ` is ${doingLabel} ${\n\t\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\t? 'with you'\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} on`\n\t\t\t\t\t\t\t\t\t\t\t\t: null}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{locations.map((loc, index) => {\n\t\t\t\t\t\t\t\t\t\t\tconst locationLabel = getLocationLabel(loc)\n\t\t\t\t\t\t\t\t\t\t\tif (!locationLabel) return null\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`${loc.workshopTitle}-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'flex flex-col items-center',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlocations.length > 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'border-border mt-1 border-t pt-1 first:mt-0 first:border-t-0 first:pt-0'\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)}\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{locationLabel.line1 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{getProductHostEmoji(loc.productHost)}{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{locationLabel.line1}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{locationLabel.line2 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{locationLabel.line2}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\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</span>\n\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)\n\t\t\t\t\t},\n\t\t\t\t)}\n\t\t\t\t{tiffany}\n\t\t\t\t{shouldShowNumberOverLimit ? (\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild tabIndex={0}>\n\t\t\t\t\t\t\t<div\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'bg-accent text-accent-foreground flex items-center justify-center rounded-full border text-xs',\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 truncate 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\nfunction getLoggedInProductEmojis(\n\thosts: string[] | null | undefined,\n): string | null {\n\tif (!hosts || hosts.length === 0) return null\n\treturn hosts\n\t\t.map((host) => productHostEmojis[host])\n\t\t.filter(Boolean)\n\t\t.join(' ')\n}\n\nfunction getUserLocations(user: User): Location[] {\n\tif (user.locations && user.locations.length > 0) {\n\t\treturn user.locations.filter(Boolean) as Location[]\n\t}\n\tif (user.location) {\n\t\treturn [user.location]\n\t}\n\treturn []\n}\n\nfunction getUniqueProductHostEmojis(locations: Location[]): string | null {\n\tconst uniqueHosts = new Set<string>()\n\tfor (const loc of locations) {\n\t\tif (loc.productHost) {\n\t\t\tuniqueHosts.add(loc.productHost)\n\t\t}\n\t}\n\tif (uniqueHosts.size === 0) return null\n\treturn Array.from(uniqueHosts)\n\t\t.map((host) => getProductHostEmoji(host))\n\t\t.filter(Boolean)\n\t\t.join('')\n}\n\nfunction hasExtras(apps: Array<{ relativePath: string }>) {\n\treturn apps.some((app) => {\n\t\tconst rootDir = app.relativePath.split(/[\\\\/]/)[0]\n\t\treturn (\n\t\t\trootDir === 'extra' || rootDir === 'example' || rootDir === 'examples'\n\t\t)\n\t})\n}\n\nconst useIsWide = makeMediaQueryStore('(min-width: 640px)', true)\n\nexport default function App() {\n\tconst data = useLoaderData<typeof loader>()\n\tconst user = useOptionalUser()\n\tconst isWide = useIsWide()\n\tconst isHydrated = useHydrated()\n\n\tconst [isMenuOpened, setMenuOpenedState] = React.useState(data.isMenuOpened)\n\tuseRevalidationWS({\n\t\twatchPaths: [\n\t\t\t'./exercises/README.mdx',\n\t\t\t'./extra',\n\t\t\t'./example',\n\t\t\t'./examples',\n\t\t],\n\t})\n\n\tfunction setMenuOpened(value: boolean) {\n\t\tsetMenuOpenedState(value)\n\t\tdocument.cookie = `es_menu_open=${value.toString()}; path=/; SameSite=Lax;`\n\t}\n\n\treturn (\n\t\t<div className=\"flex flex-col\">\n\t\t\t{user ? null : <NoUserBanner />}\n\t\t\t{/*\n\t\t\t\tthis isn't placed in a conditional with isWide because the server render\n\t\t\t\tdoesn't know whether it should be around or not so we just use CSS to hide it\n\t\t\t\tif it's not supposed to show up.\n\n\t\t\t\tWe don't just use media queries for the wider screen nav because we want\n\t\t\t\tto avoid running all the logic in there unnecessarily.\n\t\t\t*/}\n\t\t\t{isHydrated && isWide ? null : (\n\t\t\t\t<MobileNavigation\n\t\t\t\t\tisMenuOpened={isMenuOpened}\n\t\t\t\t\tonMenuOpenChange={setMenuOpened}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\t// this nonsense is here because we want the panels to be scrollable rather\n\t\t\t\t// than having the entire page be scrollable (at least on wider screens)\n\t\t\t\tclassName={cn('flex grow flex-col sm:flex-row', {\n\t\t\t\t\t'h-[calc(100vh-128px-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\t!user,\n\t\t\t\t\t'h-[calc(100vh-64px-env(safe-area-inset-top)-env(safe-area-inset-bottom))] sm: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\t'h-[unset]': !isWide && isMenuOpened,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{isWide ? (\n\t\t\t\t\t<Navigation\n\t\t\t\t\t\tisMenuOpened={isMenuOpened}\n\t\t\t\t\t\tonMenuOpenChange={setMenuOpened}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\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-full sm: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 NoUserBanner() {\n\tconst isWide = useIsWide()\n\tconst {\n\t\tproduct: { host, displayName },\n\t} = useWorkshopConfig()\n\tconst userHasAccess = useUserHasAccess()\n\tconst [showLoginBadge, dismissLoginBadge] =\n\t\tuseOnboardingIndicator('login-button')\n\tconst details = (\n\t\t<div>\n\t\t\t{ENV.EPICSHOP_DEPLOYED ? (\n\t\t\t\t<div>\n\t\t\t\t\t{`This is the deployed version. `}\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Link\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\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\tto={ENV.EPICSHOP_GITHUB_REPO}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tRun locally\n\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t{` for full experience.`}\n\t\t\t\t\t</>{' '}\n\t\t\t\t</div>\n\t\t\t) : userHasAccess ? (\n\t\t\t\t<div>\n\t\t\t\t\t<Link to=\"/login\" className=\"underline\">\n\t\t\t\t\t\tLogin\n\t\t\t\t\t</Link>{' '}\n\t\t\t\t\tor{' '}\n\t\t\t\t\t<a href={`https://${host}/login`} className=\"underline\">\n\t\t\t\t\t\tjoin for free\n\t\t\t\t\t</a>{' '}\n\t\t\t\t\tfor the full experience.\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t)\n\treturn (\n\t\t<div className=\"from-highlight to-info text-info-foreground z-10 flex h-16 items-center justify-between border-b bg-linear-to-tr pl-4\">\n\t\t\t{isWide ? (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"hidden flex-1 flex-wrap items-center gap-4 sm:flex\">\n\t\t\t\t\t\t<Logo size=\"lg\" style=\"monochrome\" />\n\t\t\t\t\t\t<div className=\"flex flex-1 flex-wrap items-center\">\n\t\t\t\t\t\t\t<p className=\"mr-2\">\n\t\t\t\t\t\t\t\tWelcome to the{' '}\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\tto={`https://${host}`}\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>\n\t\t\t\t\t\t\t\t\t{displayName}\n\t\t\t\t\t\t\t\t</Link>{' '}\n\t\t\t\t\t\t\t\tWorkshop app!\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t{details}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{userHasAccess ? null : (\n\t\t\t\t\t\t<div className=\"hidden h-full flex-col items-center sm:flex md:flex-row\">\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tto={`https://${host}`}\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\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\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"drop-shadow-sm\">Join {displayName}</span>\n\t\t\t\t\t\t\t\t<span>↗︎</span>\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tto={ENV.EPICSHOP_DEPLOYED ? `https://${host}/login` : '/login'}\n\t\t\t\t\t\t\t\tclassName=\"bg-info-foreground/20 hover:bg-info-foreground/30 relative flex h-full items-center justify-center space-x-1.5 px-5 text-sm font-semibold shadow-md transition\"\n\t\t\t\t\t\t\t\tonClick={dismissLoginBadge}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon name=\"User\" size=\"lg\" />\n\t\t\t\t\t\t\t\t<span className=\"drop-shadow-sm\">Login</span>\n\t\t\t\t\t\t\t\t{showLoginBadge ? (\n\t\t\t\t\t\t\t\t\t<OnboardingBadge\n\t\t\t\t\t\t\t\t\t\ttooltip=\"Login for the full experience!\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"flex flex-1 flex-wrap items-center gap-4 sm:hidden\">\n\t\t\t\t\t\t<a href={`https://${host}`}>\n\t\t\t\t\t\t\t<Logo size=\"lg\" style=\"monochrome\" />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<Dialog>\n\t\t\t\t\t\t\t<DialogTrigger>\n\t\t\t\t\t\t\t\t<Icon name=\"Question\" size=\"lg\" className=\"animate-pulse\" />\n\t\t\t\t\t\t\t</DialogTrigger>\n\t\t\t\t\t\t\t<DialogContent>\n\t\t\t\t\t\t\t\t<DialogHeader>\n\t\t\t\t\t\t\t\t\t<Logo size=\"lg\" style=\"monochrome\" />\n\t\t\t\t\t\t\t\t\t<span className=\"text-lg font-semibold\">{displayName}</span>\n\t\t\t\t\t\t\t\t</DialogHeader>\n\t\t\t\t\t\t\t\t<DialogDescription>\n\t\t\t\t\t\t\t\t\tWelcome to the{' '}\n\t\t\t\t\t\t\t\t\t<Link to={`https://${host}`} className=\"underline\">\n\t\t\t\t\t\t\t\t\t\t{displayName}\n\t\t\t\t\t\t\t\t\t</Link>{' '}\n\t\t\t\t\t\t\t\t\tWorkshop app!\n\t\t\t\t\t\t\t\t</DialogDescription>\n\t\t\t\t\t\t\t\t{details}\n\t\t\t\t\t\t\t</DialogContent>\n\t\t\t\t\t\t</Dialog>\n\t\t\t\t\t</div>\n\t\t\t\t\t{userHasAccess ? null : (\n\t\t\t\t\t\t<div className=\"flex h-full items-center\">\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tto={`https://${host}`}\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\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\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"drop-shadow-sm\">Join</span>\n\t\t\t\t\t\t\t\t<span>↗︎</span>\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tto={ENV.EPICSHOP_DEPLOYED ? `https://${host}/login` : '/login'}\n\t\t\t\t\t\t\t\tclassName=\"bg-info-foreground/20 hover:bg-info-foreground/30 relative flex h-full items-center justify-center space-x-1.5 px-5 text-sm font-semibold shadow-md transition\"\n\t\t\t\t\t\t\t\tonClick={dismissLoginBadge}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon name=\"User\" size=\"lg\" />\n\t\t\t\t\t\t\t\t<span className=\"drop-shadow-sm\">Login</span>\n\t\t\t\t\t\t\t\t{showLoginBadge ? (\n\t\t\t\t\t\t\t\t\t<OnboardingBadge\n\t\t\t\t\t\t\t\t\t\ttooltip=\"Login for the full experience!\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\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\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=\"inline-block pl-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\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=\"inline-block pl-2\">{children}</span>\n\t\t</motion.li>\n\t)\n}\n\nfunction NavigationExtrasListItem({ children }: { children: React.ReactNode }) {\n\treturn (\n\t\t<motion.li\n\t\t\tvariants={itemVariants}\n\t\t\tclassName=\"py-[6px] first:pt-3 last:pb-3\"\n\t\t>\n\t\t\t<span className=\"inline-block pl-2\">{children}</span>\n\t\t</motion.li>\n\t)\n}\n\nconst navHighlightBaseClassName =\n\t'relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[\"\"]'\n\nfunction getNavHighlightClassName(\n\tisActive: boolean,\n\tclassName?: string | null,\n) {\n\treturn clsx(navHighlightBaseClassName, className, {\n\t\t'bg-foreground text-background': isActive,\n\t})\n}\n\nfunction MobileNavigation({\n\tisMenuOpened,\n\tonMenuOpenChange: setMenuOpened,\n}: {\n\tisMenuOpened: boolean\n\tonMenuOpenChange: (change: boolean) => void\n}) {\n\tconst data = useLoaderData<typeof loader>()\n\tconst apps = useApps()\n\tconst user = useOptionalUser()\n\tconst nextExerciseRoute = useNextExerciseRoute()\n\tconst params = useParams()\n\tconst location = useLocation()\n\tconst isOnline = useIsOnline()\n\tconst { users } = usePresence()\n\n\t// Onboarding indicators\n\tconst [showAccountBadge, dismissAccountBadge] =\n\t\tuseOnboardingIndicator('account-link')\n\tconst showExtrasLink = hasExtras(apps)\n\tconst playgroundExtra = data.extras.find(\n\t\t(extra) => extra.name === data.playground.appName,\n\t)\n\tconst isExtrasActive =\n\t\tlocation.pathname === '/extra' || location.pathname.startsWith('/extra/')\n\tconst showExtrasPlaygroundLink = Boolean(playgroundExtra) && !isExtrasActive\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\n\treturn (\n\t\t<nav className=\"flex w-full border-b sm:hidden\">\n\t\t\t<div className=\"w-full\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn('flex items-center', {\n\t\t\t\t\t\t'flex-col': isMenuOpened,\n\t\t\t\t\t\t'h-14': !isMenuOpened,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<NavToggle\n\t\t\t\t\t\ttitle={data.workshopTitle}\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\tclassName=\"scrollbar-thin scrollbar-thumb-scrollbar flex w-full grow flex-col justify-between overflow-x-auto p-6\"\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\tclassName=\"flex flex-col\"\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\t<NavLink\n\t\t\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\tto=\"/\"\n\t\t\t\t\t\t\t\t\t\tclassName={({ isActive }) =>\n\t\t\t\t\t\t\t\t\t\t\tclsx(\n\t\t\t\t\t\t\t\t\t\t\t\t'relative px-2 py-0.5 pr-3 text-2xl font-bold whitespace-nowrap outline-none hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[\"\"] hover:underline focus:underline',\n\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)\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\tHome\n\t\t\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t\t</span>\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\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<span className=\"flex items-center gap-1 text-2xl font-bold\">\n\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\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tto={getExercisePath(exerciseNumber)}\n\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'relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[\"\"] hover:underline focus:underline',\n\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)}\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{title}\n\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{showPlayground ? (\n\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\tto={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.exerciseNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.stepNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.type,\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\tprefetch=\"intent\"\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🛝\n\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) : null}\n\t\t\t\t\t\t\t\t\t\t\t</span>\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\tclassName=\"mt-2 ml-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={getExercisePath(exerciseNumber)}\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'after:bg-background relative px-2 py-0.5 pr-3 text-xl font-medium whitespace-nowrap outline-none after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 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(({ stepNumber, title, problem, solution }) => {\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<div className=\"flex flex-col gap-0.5\">\n\t\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\t\tto={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstepNumber,\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\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"leading-tight font-semibold\"\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\t\t{stepNumber.toString().padStart(2, '0')}.{' '}\n\t\t\t\t\t\t\t\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\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\t<div className=\"mt-0.5 ml-3 flex gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{problem && (\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tto={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstepNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'problem',\n\t\t\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\tprefetch=\"intent\"\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tgetNavHighlightClassName(isActive)\n\t\t\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>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tProblem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{problem.name ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.appName\n\t\t\t\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\t\t: ''}\n\t\t\t\t\t\t\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\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{solution && (\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tto={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstepNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'solution',\n\t\t\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\tprefetch=\"intent\"\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tgetNavHighlightClassName(isActive)\n\t\t\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>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tSolution\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{solution.name ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.appName\n\t\t\t\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\t\t: ''}\n\t\t\t\t\t\t\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\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\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={getExercisePath(exerciseNumber, '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'after:bg-background relative px-2 py-0.5 pr-3 text-base font-medium whitespace-nowrap outline-none after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 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\t{showExtrasLink ? (\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"flex items-center gap-1 text-2xl font-bold\">\n\t\t\t\t\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\t\t\t\t\tto=\"/extra\"\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\tclassName={({ isActive }) =>\n\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'relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[\"\"] hover:underline focus:underline',\n\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)\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📚 Extras\n\t\t\t\t\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t\t\t\t\t{showExtrasPlaygroundLink && playgroundExtra ? (\n\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\tto={`/extra/${playgroundExtra.dirName}`}\n\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>\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</Link>\n\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{isExtrasActive && data.extras.length ? (\n\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\tvariants={listVariants}\n\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\tanimate=\"visible\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mt-2 ml-4 flex flex-col\"\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{data.extras.map((extra) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<NavigationExtrasListItem key={extra.dirName}>\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={`/extra/${extra.dirName}`}\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\tgetNavHighlightClassName(\n\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'leading-tight font-semibold',\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{extra.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{extra.name === data.playground.appName\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: ''}\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</NavigationExtrasListItem>\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</motion.ul>\n\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) : null}\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 text-lg font-bold whitespace-nowrap 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'after:bg-background bg-foreground text-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 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<div className=\"grow\" />\n\t\t\t\t\t{isOnline ? null : (\n\t\t\t\t\t\t<SimpleTooltip content={isMenuOpened ? null : 'You are offline'}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t'flex h-14 animate-pulse items-center justify-start p-4',\n\t\t\t\t\t\t\t\t\tisMenuOpened ? 'w-full border-t' : 'border-l',\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<Icon\n\t\t\t\t\t\t\t\t\tname=\"WifiNoConnection\"\n\t\t\t\t\t\t\t\t\tclassName=\"text-foreground-destructive\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{isMenuOpened ? 'You are offline' : null}\n\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</SimpleTooltip>\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 items-center justify-start p-4',\n\t\t\t\t\t\t\tisMenuOpened && users.length > 4 ? 'min-h-14' : 'h-14',\n\t\t\t\t\t\t\tisMenuOpened ? 'w-full border-t' : 'border-l',\n\t\t\t\t\t\t)}\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={cn(\n\t\t\t\t\t\t\t\t\t'relative flex h-14 shrink-0 items-center justify-start space-x-3 px-4 py-4 text-center no-underline hover:underline',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'border-l': !isMenuOpened,\n\t\t\t\t\t\t\t\t\t\t'w-full border-t': isMenuOpened,\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\tto=\"/account\"\n\t\t\t\t\t\t\t\tonClick={dismissAccountBadge}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{user.imageUrlSmall ? (\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.imageUrlSmall}\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=\"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\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\t{showAccountBadge ? (\n\t\t\t\t\t\t\t\t\t<OnboardingBadge\n\t\t\t\t\t\t\t\t\t\ttooltip=\"View your account and preferences\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null}\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-l 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=\"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\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\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'flex h-14 w-14 items-center justify-center self-start p-4 sm:mb-4 sm:w-full',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'w-full border-t': isMenuOpened,\n\t\t\t\t\t\t\t\t'border-l': !isMenuOpened,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\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</div>\n\t\t</nav>\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 apps = useApps()\n\tconst user = useOptionalUser()\n\tconst nextExerciseRoute = useNextExerciseRoute()\n\tconst params = useParams()\n\tconst location = useLocation()\n\tconst isOnline = useIsOnline()\n\tconst { users } = usePresence()\n\n\t// Onboarding indicators\n\tconst [showAccountBadge, dismissAccountBadge] =\n\t\tuseOnboardingIndicator('account-link')\n\tconst showExtrasLink = hasExtras(apps)\n\tconst playgroundExtra = data.extras.find(\n\t\t(extra) => extra.name === data.playground.appName,\n\t)\n\tconst isExtrasActive =\n\t\tlocation.pathname === '/extra' || location.pathname.startsWith('/extra/')\n\tconst showExtrasPlaygroundLink = Boolean(playgroundExtra) && !isExtrasActive\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\n\tconst handleOpenShortcuts = React.useCallback(() => {\n\t\tif (typeof window === 'undefined') return\n\t\twindow.dispatchEvent(new CustomEvent('toggle-keyboard-shortcuts'))\n\t}, [])\n\n\treturn (\n\t\t<nav className=\"hidden border-r sm:flex\">\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\tclassName=\"scrollbar-thin scrollbar-thumb-scrollbar flex grow flex-col justify-between overflow-y-auto p-6\"\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\tclassName=\"flex flex-col\"\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\t<NavLink\n\t\t\t\t\t\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\tto=\"/\"\n\t\t\t\t\t\t\t\t\t\tclassName={({ isActive }) =>\n\t\t\t\t\t\t\t\t\t\t\tclsx(\n\t\t\t\t\t\t\t\t\t\t\t\t'relative px-2 py-0.5 pr-3 text-2xl font-bold whitespace-nowrap outline-none hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[\"\"] hover:underline focus:underline',\n\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)\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\tHome\n\t\t\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t\t</span>\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\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<span className=\"flex items-center gap-1 text-2xl font-bold\">\n\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\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tto={getExercisePath(exerciseNumber)}\n\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'relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[\"\"] hover:underline focus:underline',\n\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)}\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{title}\n\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{showPlayground ? (\n\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\tto={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.exerciseNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.stepNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.type,\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\tprefetch=\"intent\"\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🛝\n\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) : null}\n\t\t\t\t\t\t\t\t\t\t\t</span>\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\tclassName=\"mt-2 ml-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={getExercisePath(exerciseNumber)}\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'after:bg-background relative px-2 py-0.5 pr-3 text-xl font-medium whitespace-nowrap outline-none after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 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(({ stepNumber, title, problem, solution }) => {\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<div className=\"flex flex-col gap-0.5\">\n\t\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\t\tto={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstepNumber,\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\tprefetch=\"intent\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"leading-tight font-semibold\"\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\t\t{stepNumber.toString().padStart(2, '0')}.{' '}\n\t\t\t\t\t\t\t\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\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\t<div className=\"mt-0.5 ml-3 flex gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{problem && (\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tto={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstepNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'problem',\n\t\t\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\tprefetch=\"intent\"\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tgetNavHighlightClassName(isActive)\n\t\t\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>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tProblem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{problem.name ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.appName\n\t\t\t\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\t\t: ''}\n\t\t\t\t\t\t\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\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{solution && (\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tto={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texerciseNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstepNumber,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'solution',\n\t\t\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\tprefetch=\"intent\"\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tgetNavHighlightClassName(isActive)\n\t\t\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>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tSolution\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{solution.name ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata.playground.appName\n\t\t\t\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\t\t: ''}\n\t\t\t\t\t\t\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\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\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={getExercisePath(exerciseNumber, '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'after:bg-background relative px-2 py-0.5 pr-3 text-base font-medium whitespace-nowrap outline-none after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 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\t{showExtrasLink ? (\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"flex items-center gap-1 text-2xl font-bold\">\n\t\t\t\t\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\t\t\t\t\tto=\"/extra\"\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\tclassName={({ isActive }) =>\n\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'relative px-2 py-0.5 pr-3 whitespace-nowrap outline-none hover:underline focus:underline',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'after:bg-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 after:content-[\"\"] hover:underline focus:underline',\n\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)\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📚 Extras\n\t\t\t\t\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t\t\t\t\t{showExtrasPlaygroundLink && playgroundExtra ? (\n\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\tto={`/extra/${playgroundExtra.dirName}`}\n\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>\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</Link>\n\t\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{isExtrasActive && data.extras.length ? (\n\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\tvariants={listVariants}\n\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\tanimate=\"visible\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mt-2 ml-4 flex flex-col\"\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{data.extras.map((extra) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<NavigationExtrasListItem key={extra.dirName}>\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={`/extra/${extra.dirName}`}\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\tgetNavHighlightClassName(\n\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'leading-tight font-semibold',\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{extra.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{extra.name === data.playground.appName\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: ''}\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</NavigationExtrasListItem>\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</motion.ul>\n\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) : null}\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 text-lg font-bold whitespace-nowrap 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'after:bg-background bg-foreground text-background after:absolute after:-right-2.5 after:-bottom-2.5 after:h-5 after:w-5 after:scale-75 after:rotate-45 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 grow flex-col justify-center\">\n\t\t\t\t\t\t\t<div className=\"orientation-sideways w-full font-mono text-sm leading-none font-medium uppercase\">\n\t\t\t\t\t\t\t\t{exercise?.title ? (\n\t\t\t\t\t\t\t\t\t<Link to={getExercisePath(Number(params.exerciseNumber))}>\n\t\t\t\t\t\t\t\t\t\t{exercise.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\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={getExerciseStepPath(\n\t\t\t\t\t\t\t\t\t\t\tNumber(params.exerciseNumber),\n\t\t\t\t\t\t\t\t\t\t\tapp.stepNumber,\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{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{isOnline ? null : (\n\t\t\t\t\t\t<SimpleTooltip content={isMenuOpened ? null : 'You are offline'}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t'flex w-full animate-pulse items-center border-t p-4',\n\t\t\t\t\t\t\t\t\tisMenuOpened ? 'justify-start' : 'justify-center',\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<Icon\n\t\t\t\t\t\t\t\t\tname=\"WifiNoConnection\"\n\t\t\t\t\t\t\t\t\tclassName=\"text-foreground-destructive\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{isMenuOpened ? (\n\t\t\t\t\t\t\t\t\t\t<span className=\"whitespace-nowrap\">You are offline</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</SimpleTooltip>\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=\"relative flex h-14 w-full shrink-0 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\tonClick={dismissAccountBadge}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{user.imageUrlSmall ? (\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.imageUrlSmall}\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=\"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\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\t{showAccountBadge ? (\n\t\t\t\t\t\t\t\t\t<OnboardingBadge\n\t\t\t\t\t\t\t\t\t\ttooltip=\"View your account and preferences\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : null}\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=\"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\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 pt-[15px] pl-3\">\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t<ThemeSwitch />\n\t\t\t\t\t\t\t{isMenuOpened ? (\n\t\t\t\t\t\t\t\t<SimpleTooltip content=\"Keyboard shortcuts (press ?)\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\taria-label=\"Keyboard shortcuts\"\n\t\t\t\t\t\t\t\t\t\tonClick={handleOpenShortcuts}\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring flex h-8 w-8 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-offset-2\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Icon name=\"Question\" size=\"md\" />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</SimpleTooltip>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\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?: ReturnType<typeof useAnimationControls>\n}) {\n\tconst initialOpenRef = React.useRef(isMenuOpened)\n\tconst menuButtonRef = React.useRef<HTMLButtonElement>(null)\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\tReact.useEffect(() => {\n\t\tif (!isMenuOpened) return\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key !== 'Escape' || event.defaultPrevented) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst hasOpenDialog = Boolean(\n\t\t\t\tdocument.querySelector(\n\t\t\t\t\t'[role=\"dialog\"][data-state=\"open\"], [role=\"alertdialog\"][data-state=\"open\"]',\n\t\t\t\t),\n\t\t\t)\n\n\t\t\tif (!hasOpenDialog) {\n\t\t\t\tmenuButtonRef.current?.click()\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown)\n\t}, [isMenuOpened])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t'relative inline-flex h-14 shrink-0 items-center justify-between overflow-hidden border-r sm:w-full sm:border-r-0 sm:border-b',\n\t\t\t\t{\n\t\t\t\t\t'w-full': isMenuOpened,\n\t\t\t\t},\n\t\t\t)}\n\t\t>\n\t\t\t<button\n\t\t\t\tref={menuButtonRef}\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[initialOpenRef.current ? 'open' : '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[initialOpenRef.current ? 'open' : '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\tclassName=\"absolute right-5 font-mono text-sm whitespace-nowrap 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","makeMediaQueryStore","mediaQuery","serverSnapshot","getSnapshot","subscribe","callback","mediaQueryList","useSyncExternalStore","opacities","shadows","getScoreClassNames","score","opacityNumber","Math","round","length","shadowNumber","cn","FacePile","isMenuOpened","loggedInUser","useOptionalUser","users","usePresence","product","displayNameShort","useWorkshopConfig","limit","numberOverLimit","shouldShowNumberOverLimit","tiffany","jsx","Link","target","rel","to","children","alt","className","src","overLimitLabel","TooltipProvider","slice","map","user","scoreClassNames","locations","getUserLocations","imageUrl","imageUrlSmall","avatarUrl","hasAccess","local","some","loc","origin","includes","productHostEmojis","getUniqueProductHostEmojis","loggedInEmojis","getLoggedInProductEmojis","loggedInProductHosts","optOut","Tooltip","TooltipTrigger","asChild","tabIndex","Icon","name","TooltipContent","jsxs","id","doingLabel","index","locationLabel","getLocationLabel","line1","getProductHostEmoji","productHost","line2","workshopTitle","hosts","host","filter","Boolean","join","location","uniqueHosts","Set","add","size","Array","from","hasExtras","apps","app","rootDir","relativePath","split","useIsWide","_layout","_UNSAFE_withComponentProps","data","useLoaderData","isWide","isHydrated","useHydrated","setMenuOpenedState","React","useRevalidationWS","watchPaths","setMenuOpened","document","cookie","toString","NoUserBanner","MobileNavigation","onMenuOpenChange","Navigation","Outlet","exercise","exercisePortion","exerciseNumber","stepNumber","s","padStart","type","displayName","userHasAccess","useUserHasAccess","showLoginBadge","dismissLoginBadge","useOnboardingIndicator","details","ENV","EPICSHOP_DEPLOYED","Fragment","EPICSHOP_GITHUB_REPO","href","Logo","style","onClick","OnboardingBadge","tooltip","Dialog","DialogTrigger","DialogContent","DialogHeader","DialogDescription","itemVariants","hidden","opacity","x","visible","NavigationExerciseListItem","progressClassName","useExerciseProgressClassName","motion","li","variants","NavigationExerciseStepListItem","progressItemSearch","useProgressItemClassName","NavigationExtrasListItem","navHighlightBaseClassName","getNavHighlightClassName","isActive","clsx","useApps","nextExerciseRoute","useNextExerciseRoute","params","useParams","useLocation","isOnline","useIsOnline","showAccountBadge","dismissAccountBadge","showExtrasLink","playgroundExtra","extras","find","extra","playground","appName","isExtrasActive","pathname","startsWith","showExtrasPlaygroundLink","listVariants","transition","duration","when","staggerChildren","NavToggle","title","div","initial","animate","ul","NavLink","prefetch","exercises","steps","Number","showPlayground","getExercisePath","getExerciseStepPath","problem","solution","dirName","SimpleTooltip","content","email","state","ThemeSwitch","OPENED_MENU_WIDTH","e","solutions","problems","p","menuControls","menuVariants","close","width","open","handleOpenShortcuts","window","dispatchEvent","CustomEvent","initialOpenRef","menuButtonRef","path01Variants","d","closed","path02Variants","moving","path01Controls","path02Controls","toggleMenu","start","handleKeyDown","event","defaultPrevented","querySelector","current","click","addEventListener","removeEventListener","ref","height","viewBox","path","stroke","strokeWidth","delay","y"],"mappings":"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","x_google_ignoreList":[0,1]}

package/build/client/assets/_layout-yxOoJ6Yg.js

@@ -1,2 +0,0 @@
-import{b as j,d as K,L as h,A as W,w as Q,a as Z,O as J}from"./chunk-EPOLDU6W-BCLmut3y.js";import{j as e}from"./jsx-runtime-C5WNSv3b.js";import{E as ee}from"./index-CEVyDj51.js";import{r as p}from"./index-CqIc3cxq.js";import{G as re}from"./error-boundary-DFBd6s0g.js";import{N as te}from"./nav-chevrons-DlNUibJV.js";import{u as oe}from"./revalidation-ws-BJWJviUX.js";import{L as N,E as ne}from"./launch-editor-B2dmpkaO.js";import{P as se}from"./progress-fKsNxmmt.js";import{S as A}from"./set-playground-DeMY9i7p.js";import{l as ie,c as O,I as w,o as ae,m as le}from"./misc-DVYuZMjW.js";import{a as ce,g as pe}from"./root-loader-BOzEMapJ.js";import{g as de}from"./seo-t5J-DRxw.js";import{s as R,a as ue}from"./split-layout-DnRER1bP.js";import{E as me}from"./error-boundary-BDqWjIFP.js";import{E as fe}from"./epic-video-BVcJzJzi.js";import{S as E,l as D,u as xe,R as he,c as ge,d as ve,e as k,P as I,f as v,A as _,g as L,h as je,i as Pe,D as Ne,C as be,m as Ce}from"./tooltip-Chzzs4KB.js";import{M as we}from"./mdx-vrch0szL.js";import{h as Ee,R as Se,u as ye,F as Oe}from"./index-C_KjwKVt.js";import{u as Re,O as Ae}from"./onboarding-indicator-CVwXz3Cn.js";import"./preload-helper-BXl3LOEh.js";import"./schemas-Uj5SZtvt.js";import"./progress-bar-B27isaGl.js";import"./pe-CIZUOJMr.js";import"./index-BOhw3wcM.js";import"./index-vDCSPjrM.js";import"./button-CIlVtsau.js";import"./dialog-DnpUg3VT.js";import"./chunk-FNSCYPCZ-BHgC5cdx.js";import"./coerce-CkHW0SMv.js";import"./use-event-source-BuD4_2SF.js";import"./index-DzdDahau.js";import"./index-BW8stNyh.js";import"./online-DiNLkgTC.js";import"./loading-CUydCGD3.js";import"./user-BsPobzjB.js";import"./workshop-config-Zfc8zU0x.js";const T=p.createContext(null);function De(){const t=p.useContext(T);if(!t)throw new Error("useStepContext must be used within a StepContextProvider");return t}function ke({children:t,inBrowserBrowserRef:r}){return e.jsx(T,{value:{inBrowserBrowserRef:r},children:t})}const Ie={DiffLink:S,PrevDiffLink:Te,NextDiffLink:Le,InlineFile:Fe,LinkToApp:Me};function _e({inBrowserBrowserRef:t}){const r=j();return r.exerciseStepApp.instructionsCode?e.jsx(ke,{inBrowserBrowserRef:t,children:e.jsx(fe,{epicVideoInfosPromise:r.epicVideoInfosPromise,children:e.jsx("div",{className:"prose dark:prose-invert sm:prose-lg",children:e.jsx(we,{code:r.exerciseStepApp.instructionsCode,components:Ie})})})}):null}function F(t,r,o){const i=new URLSearchParams(t);return o===null?i.delete(r):i.set(r,o),i}function Le({app:t=0,fullPage:r=!1,children:o}){return e.jsx(S,{app1:t,app2:t+1,fullPage:r,children:o})}function Te({app:t=-1,fullPage:r=!1,children:o}){return e.jsx(S,{app1:t,app2:t+1,fullPage:r,children:o})}function S({app1:t=0,app2:r=1,children:o,fullPage:i=!1,to:s}){const n=j();if(!s&&!t&&!r)return e.jsx("callout-danger",{className:"notification",children:e.jsx("div",{className:"title",children:"DiffLink Error: invalid input"})});function a(c){if(typeof c=="number"){const f=n.exerciseIndex+c;return n.allApps[f]?.name}if(!c)return null;for(const{name:f,stepName:d}of n.allApps)if(c===f||c===d)return f;return null}if(s){const c=new URLSearchParams(s);t=c.get("app1"),r=c.get("app2")}const l=a(t),u=a(r);if(!l||!u)return e.jsxs("callout-danger",{className:"notification",children:[e.jsx("div",{className:"title",children:"DiffLink Error: invalid input"}),!l&&e.jsxs("div",{children:['app1: "',t,'" is not a valid app name']}),!u&&e.jsxs("div",{children:['app2: "',r,'" is not a valid app name']})]});s||(s=`app1=${l}&app2=${u}`);const m=i?`/diff?${s}`:`?${decodeURIComponent(F(new URLSearchParams,"preview",`diff&${s}`).toString())}`;return o||(o=e.jsxs("span",{children:["Go to Diff ",i?"":"Preview"," from: ",e.jsx("code",{children:l})," to:"," ",e.jsx("code",{children:u})]})),e.jsx(h,{to:m,children:o})}function Fe({file:t,type:r="playground",children:o=e.jsx("code",{children:t}),...i}){const s=j(),n=s[r]||s[s.type],a=e.jsxs("div",{className:"launch-editor-button-wrapper flex underline underline-offset-4",children:[o," ",e.jsx("svg",{height:24,width:24,children:e.jsx("use",{href:`${ae}#Keyboard`})})]});return ENV.EPICSHOP_DEPLOYED&&n?e.jsx("div",{className:"inline-block grow",children:e.jsx(N,{appFile:t,appName:n.name,...i,children:a})}):n?e.jsx("div",{className:"inline-block grow",children:e.jsx(N,{appFile:t,appName:n.name,...i,children:a})}):r==="playground"?e.jsx(E,{content:"You must 'Set to Playground' before opening a file",children:e.jsx("div",{className:"inline-block grow cursor-not-allowed",children:a})}):e.jsx(e.Fragment,{children:"children"})}function $e(t){return t==="problem"?"problem":t==="solution"?"solution":"playground"}function Me({to:t,children:r=e.jsx("code",{children:t.toString()}),...o}){const[i]=K(),s=`?${F(i,"pathname",t.toString()).toString()}`,n=j(),a=$e(i.get("preview")),l=ce(),u=n[a],m=u?.dev.type==="script"?ie({domain:l.domain,port:u.dev.portNumber}):n.playground?.dev.type==="browser"||n.playground?.dev.type==="export"?n.playground.dev.pathname:null,{inBrowserBrowserRef:c}=De(),f=m?m.slice(0,-1)+t.toString():null;return e.jsxs("div",{className:"inline-flex items-center justify-between gap-1",children:[e.jsx(h,{to:s,...o,className:O(o.className,{"cursor-not-allowed":ENV.EPICSHOP_DEPLOYED}),title:ENV.EPICSHOP_DEPLOYED?"Cannot link to app in deployed version":void 0,onClick:d=>{ENV.EPICSHOP_DEPLOYED&&d.preventDefault(),o.onClick?.(d),c.current?.handleExtrnalNavigation(t.toString())},children:r}),f?e.jsx(E,{content:"Open in new tab",children:e.jsx("a",{href:f,target:"_blank",rel:"noreferrer",className:O("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:d=>{ENV.EPICSHOP_DEPLOYED&&d.preventDefault()},children:e.jsx(w,{name:"ExternalLink"})})}):null]})}var b="Popover",[$]=ge(b,[D]),P=D(),[He,x]=$(b),M=t=>{const{__scopePopover:r,children:o,open:i,defaultOpen:s,onOpenChange:n,modal:a=!1}=t,l=P(r),u=p.useRef(null),[m,c]=p.useState(!1),[f,d]=xe({prop:i,defaultProp:s??!1,onChange:n,caller:b});return e.jsx(he,{...l,children:e.jsx(He,{scope:r,contentId:ve(),triggerRef:u,open:f,onOpenChange:d,onOpenToggle:p.useCallback(()=>d(C=>!C),[d]),hasCustomAnchor:m,onCustomAnchorAdd:p.useCallback(()=>c(!0),[]),onCustomAnchorRemove:p.useCallback(()=>c(!1),[]),modal:a,children:o})})};M.displayName=b;var H="PopoverAnchor",Ue=p.forwardRef((t,r)=>{const{__scopePopover:o,...i}=t,s=x(H,o),n=P(o),{onCustomAnchorAdd:a,onCustomAnchorRemove:l}=s;return p.useEffect(()=>(a(),()=>l()),[a,l]),e.jsx(_,{...n,...i,ref:r})});Ue.displayName=H;var U="PopoverTrigger",B=p.forwardRef((t,r)=>{const{__scopePopover:o,...i}=t,s=x(U,o),n=P(o),a=k(r,s.triggerRef),l=e.jsx(I.button,{type:"button","aria-haspopup":"dialog","aria-expanded":s.open,"aria-controls":s.contentId,"data-state":X(s.open),...i,ref:a,onClick:v(t.onClick,s.onOpenToggle)});return s.hasCustomAnchor?l:e.jsx(_,{asChild:!0,...n,children:l})});B.displayName=U;var y="PopoverPortal",[Be,Ve]=$(y,{forceMount:void 0}),V=t=>{const{__scopePopover:r,forceMount:o,children:i,container:s}=t,n=x(y,r);return e.jsx(Be,{scope:r,forceMount:o,children:e.jsx(L,{present:o||n.open,children:e.jsx(je,{asChild:!0,container:s,children:i})})})};V.displayName=y;var g="PopoverContent",Y=p.forwardRef((t,r)=>{const o=Ve(g,t.__scopePopover),{forceMount:i=o.forceMount,...s}=t,n=x(g,t.__scopePopover);return e.jsx(L,{present:i||n.open,children:n.modal?e.jsx(Ge,{...s,ref:r}):e.jsx(qe,{...s,ref:r})})});Y.displayName=g;var Ye=Pe("PopoverContent.RemoveScroll"),Ge=p.forwardRef((t,r)=>{const o=x(g,t.__scopePopover),i=p.useRef(null),s=k(r,i),n=p.useRef(!1);return p.useEffect(()=>{const a=i.current;if(a)return Ee(a)},[]),e.jsx(Se,{as:Ye,allowPinchZoom:!0,children:e.jsx(G,{...t,ref:s,trapFocus:o.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:v(t.onCloseAutoFocus,a=>{a.preventDefault(),n.current||o.triggerRef.current?.focus()}),onPointerDownOutside:v(t.onPointerDownOutside,a=>{const l=a.detail.originalEvent,u=l.button===0&&l.ctrlKey===!0,m=l.button===2||u;n.current=m},{checkForDefaultPrevented:!1}),onFocusOutside:v(t.onFocusOutside,a=>a.preventDefault(),{checkForDefaultPrevented:!1})})})}),qe=p.forwardRef((t,r)=>{const o=x(g,t.__scopePopover),i=p.useRef(!1),s=p.useRef(!1);return e.jsx(G,{...t,ref:r,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{t.onCloseAutoFocus?.(n),n.defaultPrevented||(i.current||o.triggerRef.current?.focus(),n.preventDefault()),i.current=!1,s.current=!1},onInteractOutside:n=>{t.onInteractOutside?.(n),n.defaultPrevented||(i.current=!0,n.detail.originalEvent.type==="pointerdown"&&(s.current=!0));const a=n.target;o.triggerRef.current?.contains(a)&&n.preventDefault(),n.detail.originalEvent.type==="focusin"&&s.current&&n.preventDefault()}})}),G=p.forwardRef((t,r)=>{const{__scopePopover:o,trapFocus:i,onOpenAutoFocus:s,onCloseAutoFocus:n,disableOutsidePointerEvents:a,onEscapeKeyDown:l,onPointerDownOutside:u,onFocusOutside:m,onInteractOutside:c,...f}=t,d=x(g,o),C=P(o);return ye(),e.jsx(Oe,{asChild:!0,loop:!0,trapped:i,onMountAutoFocus:s,onUnmountAutoFocus:n,children:e.jsx(Ne,{asChild:!0,disableOutsidePointerEvents:a,onInteractOutside:c,onEscapeKeyDown:l,onPointerDownOutside:u,onFocusOutside:m,onDismiss:()=>d.onOpenChange(!1),children:e.jsx(be,{"data-state":X(d.open),role:"dialog",id:d.contentId,...C,...f,ref:r,style:{...f.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)"}})})})}),q="PopoverClose",Xe=p.forwardRef((t,r)=>{const{__scopePopover:o,...i}=t,s=x(q,o);return e.jsx(I.button,{type:"button",...i,ref:r,onClick:v(t.onClick,()=>s.onOpenChange(!1))})});Xe.displayName=q;var ze="PopoverArrow",Ke=p.forwardRef((t,r)=>{const{__scopePopover:o,...i}=t,s=P(o);return e.jsx(Ce,{...s,...i,ref:r})});Ke.displayName=ze;function X(t){return t?"open":"closed"}var We=M,Qe=B,Ze=V,Je=Y;function er({diffFilesPromise:t}){const r=j(),[o,i]=Re("files-popover"),[s,n]=p.useState(!1),a=p.useRef(null);function l(c){n(c),c&&i()}function u(){n(!1)}const m=r.playground?.appName;return e.jsx(e.Fragment,{children:e.jsxs(We,{open:s,onOpenChange:l,children:[e.jsx(Qe,{asChild:!0,children:e.jsxs("button",{className:"relative 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(w,{name:"Files"}),e.jsx("span",{className:"hidden @min-[640px]:inline",children:"Files"}),o?e.jsx(Ae,{tooltip:"Click to see which files to edit!"}):null]})}),e.jsx(Ze,{children:e.jsx(Je,{ref:a,className:"slideRightContent lg:slideUpContent invert-theme bg-background text-foreground z-10 rounded px-9 py-8 select-none",align:"start",sideOffset:5,children:e.jsxs("div",{className:"launch-editor-wrapper",children:[e.jsx("strong",{className:"inline-block px-2 pb-2 font-semibold uppercase",children:"Relevant Files"}),e.jsxs("p",{className:"text-muted-foreground mb-4 max-w-2xs px-2 text-sm",children:["These are the files you'll need to modify for this exercise. Click any file to open it directly in your editor at the right location."," ",e.jsx(h,{to:"/guide#file-links",className:"text-highlight underline",onClick:()=>n(!1),children:"Learn more →"})]}),r.problem&&r.playground?.appName!==r.problem.name?e.jsx("div",{className:"mb-2 rounded p-1 font-mono font-medium",children:e.jsx(A,{appName:r.problem.name})}):null,e.jsx("div",{id:"files",children:e.jsx(p.Suspense,{fallback:e.jsx(E,{content:"Loading diff",children:e.jsx("div",{className:"flex justify-center",children:e.jsx(w,{name:"Refresh",className:"h-8 w-8 animate-spin"})})}),children:e.jsx(W,{resolve:t,errorElement:e.jsx("div",{className:"text-foreground-destructive",children:"Something went wrong."}),children:c=>{if(!c)return e.jsx("p",{className:"text-foreground-destructive",children:"Unable to determine diff"});if(typeof c=="string")return e.jsx("p",{className:"text-foreground-destructive",children:c});if(!c.length)return e.jsx("p",{children:"No files changed"});const f=m||ENV.EPICSHOP_GITHUB_ROOT?{}:{title:"You must 'Set to Playground' before opening a file",className:"not-allowed"};return e.jsxs("ul",{...f,children:[c.length>1&&!ENV.EPICSHOP_DEPLOYED?e.jsx("div",{className:"border-opacity-50 mb-2 border-b border-b-gray-50 pb-2 font-sans",children:e.jsx(N,{appFile:c.map(d=>`${d.path},${d.line},1`),appName:"playground",onUpdate:u,children:e.jsx("p",{children:"Open All Files"})})}):null,c.map(d=>e.jsx("li",{"data-state":d.status,children:e.jsx(N,{appFile:`${d.path},${d.line},1`,appName:ENV.EPICSHOP_DEPLOYED?r.problem?.name??"playground":"playground",onUpdate:u,children:e.jsx("code",{children:d.path})})},d.path))]})}})})})]})})})]})})}function z(t,r){const o=t?.exerciseStepApp.exerciseNumber.toString().padStart(2,"0")??"00",i=t?.exerciseStepApp.stepNumber.toString().padStart(2,"0")??"00",s={problem:"💪",solution:"🏁"}[t?.type??"problem"],n=t?.[t.type]?.title??"N/A";return{emoji:s,stepNumber:i,title:n,exerciseNumber:o,exerciseTitle:t?.exerciseTitle??"Unknown exercise",workshopTitle:r,type:t?.type??"problem"}}const $r=({loaderData:t,matches:r,params:o})=>{const i=pe(r);if(!t||!i)return[{title:"🦉 | Error"}];const{emoji:s,stepNumber:n,title:a,exerciseNumber:l,exerciseTitle:u}=z(t);return de({title:`${s} | ${n}. ${a} | ${l}. ${u} | ${i.workshopTitle}`,description:`${o.type} step for exercise ${l}. ${u}`,ogTitle:a,ogDescription:`${u} step ${Number(n)} ${o.type}`,instructor:i.instructor,requestInfo:i.requestInfo})},Mr=Q(function({loaderData:r}){const o=p.useRef(null),i=p.useRef(null),s=p.useRef(null),[n,a]=p.useState(r.splitPercent),l=z(r);oe({watchPaths:[`${r.exerciseStepApp.relativePath}/README.mdx`]});const u=r.problem?r.playground?.appName!==r.problem.name:!1;return e.jsx("div",{className:"flex max-w-full grow flex-col",children:e.jsxs("main",{ref:i,className:"flex grow flex-col overflow-y-auto sm:h-full sm:min-h-[800px] md:min-h-[unset] lg:flex-row lg:overflow-y-hidden",children:[e.jsxs("div",{className:"relative flex min-w-0 flex-none basis-auto flex-col sm:col-span-1 sm:row-span-1 lg:h-full lg:basis-(--split-pct)",style:{"--split-pct":`${n}%`},ref:s,children:[e.jsx("h1",{className:"@container h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium",children:e.jsxs("div",{className:"flex h-14 items-center justify-between gap-x-2 py-2 whitespace-nowrap",children:[e.jsxs("div",{className:"flex items-center justify-start gap-x-2 uppercase",children:[e.jsxs(h,{to:le(r.exerciseStepApp.exerciseNumber),className:"hover:underline",children:[e.jsxs("span",{children:[l.exerciseNumber,"."]}),e.jsxs("span",{className:"hidden @min-[500px]:inline",children:[" ",l.exerciseTitle]})]}),e.jsx("span",{children:"/"}),e.jsxs(h,{to:".",className:"hover:underline",children:[e.jsxs("span",{children:[l.stepNumber,"."]}),e.jsxs("span",{className:"hidden @min-[300px]:inline",children:[" ",l.title]}),e.jsxs("span",{children:[" (",l.emoji]}),e.jsxs("span",{className:"hidden @min-[400px]:inline",children:[" ",l.type]}),e.jsx("span",{children:")"})]})]}),r.problem&&(r.playground?.appName!==r.problem.name||!r.playground?.isUpToDate)?e.jsx(A,{appName:r.problem.name,isOutdated:r.playground?.isUpToDate===!1,hideTextOnNarrow:!0,showOnboardingIndicator:u}):null]})}),e.jsxs("article",{id:r.articleId,className:"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar flex w-full max-w-none scroll-pt-6 flex-col justify-between space-y-6 p-2 sm:p-10 sm:pt-8 lg:h-full lg:flex-1 lg:overflow-y-auto",children:[r.exerciseStepApp.instructionsCode?e.jsx(_e,{inBrowserBrowserRef:o}):e.jsx("div",{className:"flex h-full items-center justify-center text-lg",children:e.jsx("p",{children:"No instructions yet..."})}),e.jsxs("div",{className:"mt-auto flex justify-between",children:[r.prevStepLink?e.jsxs(h,{to:r.prevStepLink.to,"aria-label":"Previous Step","data-keyboard-action":"g+p",prefetch:"intent",children:[e.jsx("span",{"aria-hidden":!0,children:"←"}),e.jsx("span",{className:"hidden xl:inline",children:" Previous"})]}):e.jsx("span",{}),r.nextStepLink?e.jsxs(h,{to:r.nextStepLink.to,"aria-label":"Next Step","data-keyboard-action":"g+n",prefetch:"intent",children:[e.jsx("span",{className:"hidden xl:inline",children:"Next "}),e.jsx("span",{"aria-hidden":!0,children:"→"})]}):e.jsx("span",{})]})]},r.articleId),e.jsx(ee,{elementQuery:`#${r.articleId}`},`scroll-${r.articleId}`),r.type==="solution"?e.jsx(se,{type:"step",exerciseNumber:r.exerciseStepApp.exerciseNumber,stepNumber:r.exerciseStepApp.stepNumber,className:"h-14 border-t px-6"}):null,e.jsxs("div",{className:"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0",children:[e.jsx("div",{children:e.jsx("div",{className:"h-full",children:e.jsx(er,{diffFilesPromise:r.diffFiles})})}),e.jsx(ne,{appName:r.exerciseStepApp.name,relativePath:`${r.exerciseStepApp.relativePath}/README.mdx`}),e.jsx(te,{prev:r.prevStepLink?{to:r.prevStepLink.to,"aria-label":"Previous Step"}:null,next:r.nextStepLink?{to:r.nextStepLink.to,"aria-label":"Next Step"}:null})]})]}),e.jsx("div",{role:"separator","aria-orientation":"vertical",title:"Drag to resize",className:"bg-border hover:bg-accent hidden w-1 cursor-col-resize lg:block",onMouseDown:m=>R({container:i.current,initialClientX:m.clientX,setSplitPercent:a}),onDoubleClick:()=>{a(ue(50))},onTouchStart:m=>{const c=m.touches?.[0];c&&R({container:i.current,initialClientX:c.clientX,setSplitPercent:a})}}),e.jsx("div",{className:"flex min-h-[50vh] min-w-0 flex-none lg:min-h-0 lg:flex-1",children:e.jsx(J,{context:{inBrowserBrowserRef:o}})})]})})}),Hr=Z(function(){return e.jsx(re,{className:"container flex items-center justify-center",statusHandlers:{404:me}})});export{Hr as ErrorBoundary,Mr as default,$r as meta};
-//# sourceMappingURL=_layout-yxOoJ6Yg.js.map