@@ -116,10 +153,10 @@ export function Card({ children }) {
### PageWrapper Component
-If you create a `components/PageWrapper.jsx`, it will **automatically wrap all page content**. Useful for layouts:
+If you create a `src/PageWrapper.jsx`, it will **automatically wrap all page content**. Useful for layouts:
```jsx
-// components/PageWrapper.jsx
+// src/PageWrapper.jsx
export default function PageWrapper({ children }) {
return (
@@ -133,7 +170,7 @@ export default function PageWrapper({ children }) {
### Markdown Components
-Components in `components/markdown/` override default Markdown element rendering:
+Components in `src/markdown/` override default Markdown element rendering:
- `Heading.tsx` - Custom heading rendering (h1-h6)
- `CodeBlock.tsx` - Custom code block rendering with syntax highlighting
@@ -148,25 +185,66 @@ Files in `public/` are copied directly to the build output. Reference them with
## Theming
-Scratch uses custom prose styling defined in `tailwind.css` for markdown content. The default template includes:
+Scratch uses [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) for markdown styling. The `prose` class is applied via PageWrapper.
+
+### Customizing Typography
+
+- **Size variants**: Add `prose-sm`, `prose-lg`, `prose-xl` in PageWrapper.jsx
+- **Color themes**: Add `prose-slate`, `prose-zinc`, `prose-neutral`, etc.
-- `scratch-prose` class for typography styling
-- Dark mode support (follows system preference via `.dark` class)
+### Overriding Prose Styling (No Custom Component)
-### Customizing the Theme
+Tailwind Typography supports element modifiers to override styling for specific element types directly in `PageWrapper.jsx`:
-The `tailwind.css` file contains all prose styling for markdown elements. You can customize:
+```jsx
+
+```
-- Headings (h1-h4), paragraphs, links, lists
-- Code blocks and inline code
-- Blockquotes, tables, images
-- Light and dark mode colors
+Available element modifiers:
+- `prose-headings:` - all headings (h1-h6)
+- `prose-h1:`, `prose-h2:`, etc. - specific heading levels
+- `prose-a:` - links
+- `prose-p:` - paragraphs
+- `prose-blockquote:` - blockquotes
+- `prose-code:` - inline code
+- `prose-pre:` - code blocks
+- `prose-ol:`, `prose-ul:`, `prose-li:` - lists
+- `prose-table:`, `prose-th:`, `prose-td:` - tables
+- `prose-img:`, `prose-figure:`, `prose-figcaption:` - images
+
+You can also add CSS overrides in `src/tailwind.css`:
+```css
+.prose a {
+ @apply text-blue-600 hover:text-blue-800 no-underline;
+}
+```
-Simply edit the `.scratch-prose` rules in `tailwind.css` to match your design.
+### Overriding with Custom Components
-### Dark Mode
+For more complex overrides (adding interactivity, conditional logic), create a custom component in `src/markdown/`:
+
+1. Create/edit a component (e.g., `Link.tsx`)
+2. Export from `src/markdown/index.ts` and add to `MDXComponents`
+
+Example:
+```tsx
+// src/markdown/Link.tsx
+export default function Link({ href, children, ...props }) {
+ const isExternal = href?.startsWith('http');
+ return (
+
+ {children}
+
+ );
+}
+```
-Dark mode is enabled by default and follows system preferences. The `PageWrapper` component uses the `scratch-prose` class, and dark mode styles are automatically applied when the `.dark` class is present on a parent element.
+Use `not-prose` class to exclude elements from typography styling.
## Generated Files
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..38eedd1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,7 @@
+>>1,X=A[H];if(0>>1;HK4(W,G))qK4(R,W)?(A[H]=R,A[q]=G,H=q):(A[H]=W,A[Z]=G,H=Z);else if(qK4(R,G))A[H]=R,A[q]=G,H=q;else break A}}return Y}function K4(A,Y){var G=A.sortIndex-Y.sortIndex;return G!==0?G:A.id-Y.id}function S4(A){for(var Y=s0(KA);Y!==null;){if(Y.callback===null)j4(KA);else if(Y.startTime<=A)j4(KA),Y.sortIndex=Y.expirationTime,LH(YA,Y);else break;Y=s0(KA)}}function VH(A){if(L6=!1,S4(A),!B6)if(s0(YA)!==null)B6=!0,IY||(IY=!0,VY());else{var Y=s0(KA);Y!==null&&IH(VH,Y.startTime-A)}}function xw(){return FH?!0:r0()-$wA&&xw());){var H=x0.callback;if(typeof H==="function"){x0.callback=null,b4=x0.priorityLevel;var X=H(x0.expirationTime<=A);if(A=r0(),typeof X==="function"){x0.callback=X,S4(A),Y=!0;break Y}x0===s0(YA)&&j4(YA),S4(A)}else j4(YA);x0=s0(YA)}if(x0!==null)Y=!0;else{var w=s0(KA);w!==null&&IH(VH,w.startTime-A),Y=!1}}break A}finally{x0=null,b4=G,DH=!1}Y=void 0}}finally{Y?VY():IY=!1}}}function IH(A,Y){f6=jw(function(){A(r0())},Y)}var r0=void 0,fH,T4,zH,YA,KA,PM=1,x0=null,b4=3,DH=!1,B6=!1,L6=!1,FH=!1,jw,Cw,Nw,IY=!1,f6=-1,gM=5,$w=-1,VY,N4,QH,OH=5,KH=1,TH=4,OY=3,bH=2,SH=function(A){A.callback=null},NH=function(){return b4},jH=function(){FH=!0},KY=function(A,Y,G){var H=r0();switch(typeof G==="object"&&G!==null?(G=G.delay,G=typeof G==="number"&&0H?(A.sortIndex=G,LH(KA,A),s0(YA)===null&&A===s0(KA)&&(L6?(Cw(f6),f6=-1):L6=!0,IH(VH,G-H))):(A.sortIndex=X,LH(YA,A),B6||DH||(B6=!0,IY||(IY=!0,VY()))),A},CH;var kw=wH(()=>{if(typeof performance==="object"&&typeof performance.now==="function")fH=performance,r0=function(){return fH.now()};else T4=Date,zH=T4.now(),r0=function(){return T4.now()-zH};YA=[],KA=[],jw=typeof setTimeout==="function"?setTimeout:null,Cw=typeof clearTimeout==="function"?clearTimeout:null,Nw=typeof setImmediate<"u"?setImmediate:null;if(typeof Nw==="function")VY=function(){Nw(BH)};else if(typeof MessageChannel<"u")N4=new MessageChannel,QH=N4.port2,N4.port1.onmessage=BH,VY=function(){QH.postMessage(null)};else VY=function(){jw(BH,0)};CH=xw});var $H={};zw($H,{version:()=>rw,useFormStatus:()=>sw,useFormState:()=>pw,unstable_batchedUpdates:()=>iw,requestFormReset:()=>cw,preloadModule:()=>lw,preload:()=>mw,preinitModule:()=>dw,preinit:()=>uw,prefetchDNS:()=>vw,preconnect:()=>yw,flushSync:()=>Ew,createPortal:()=>hw,__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE:()=>gw});function Pw(A){var Y="https://react.dev/errors/"+A;if(1{_w=m0(p0(),1);R0={d:{f:TA,r:function(){throw Error(Pw(522))},D:TA,C:TA,L:TA,m:TA,X:TA,S:TA,M:TA},p:0,findDOMNode:null},EM=Symbol.for("react.portal");z6=_w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;gw=R0});var tw=XH((OR,nw)=>{ow();function aw(){if(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__>"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!=="function")return;try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(aw)}catch(A){console.error(A)}}aw(),nw.exports=$H});var Gw={};zw(Gw,{version:()=>MU,hydrateRoot:()=>UU,createRoot:()=>qU});function F(A){var Y="https://react.dev/errors/"+A;if(1$Y||(A.current=L8[$Y],L8[$Y]=null,$Y--)}function l(A,Y){$Y++,L8[$Y]=A.current,A.current=Y}function WG(A,Y){switch(l(hA,Y),l(i6,A),l(t0,null),Y.nodeType){case 9:case 11:A=(A=Y.documentElement)?(A=A.namespaceURI)?wZ(A):0:0;break;default:if(A=Y.tagName,Y=Y.namespaceURI)Y=wZ(Y),A=rq(Y,A);else switch(A){case"svg":A=1;break;case"math":A=2;break;default:A=0}}Z0(t0),l(t0,A)}function rY(){Z0(t0),Z0(i6),Z0(hA)}function f8(A){A.memoizedState!==null&&l(ZG,A);var Y=t0.current,G=rq(Y,A.type);Y!==G&&(l(i6,A),l(t0,G))}function qG(A){i6.current===A&&(Z0(t0),Z0(i6)),ZG.current===A&&(Z0(ZG),G4._currentValue=HY)}function tA(A){if(xH===void 0)try{throw Error()}catch(G){var Y=G.stack.trim().match(/\n( *(at )?)/);xH=Y&&Y[1]||"",Y9=-1)":-1X||q[H]!==R[X]){var z=`
-`+q[H].replace(" at new "," at ");return A.displayName&&z.includes("")&&(z=z.replace("",A.displayName)),z}while(1<=H&&0<=X);break}}}finally{kH=!1,Error.prepareStackTrace=G}return(G=A?A.displayName||A.name:"")?tA(G):""}function lM(A,Y){switch(A.tag){case 26:case 27:case 5:return tA(A.type);case 16:return tA("Lazy");case 13:return A.child!==Y&&Y!==null?tA("Suspense Fallback"):tA("Suspense");case 19:return tA("SuspenseList");case 0:case 15:return _H(A.type,!1);case 11:return _H(A.type.render,!1);case 1:return _H(A.type,!0);case 31:return tA("Activity");default:return""}}function G9(A){try{var Y="",G=null;do Y+=lM(A,G),G=A,A=A.return;while(A);return Y}catch(H){return`
-Error generating stack: `+H.message+`
-`+H.stack}}function xA(A){if(typeof rM==="function"&&oM(A),S0&&typeof S0.setStrictMode==="function")try{S0.setStrictMode(Z4,A)}catch(Y){}}function tM(A){return A>>>=0,A===0?32:31-(aM(A)/nM|0)|0}function eA(A){var Y=A&42;if(Y!==0)return Y;switch(A&-A){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:return A&261888;case 262144:case 524288:case 1048576:case 2097152:return A&3932160;case 4194304:case 8388608:case 16777216:case 33554432:return A&62914560;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return A}}function hG(A,Y,G){var H=A.pendingLanes;if(H===0)return 0;var X=0,w=A.suspendedLanes,Z=A.pingedLanes;A=A.warmLanes;var W=H&134217727;return W!==0?(H=W&~w,H!==0?X=eA(H):(Z&=W,Z!==0?X=eA(Z):G||(G=W&~A,G!==0&&(X=eA(G))))):(W=H&~w,W!==0?X=eA(W):Z!==0?X=eA(Z):G||(G=H&~A,G!==0&&(X=eA(G)))),X===0?0:Y!==0&&Y!==X&&(Y&w)===0&&(w=X&-X,G=Y&-Y,w>=G||w===32&&(G&4194048)!==0)?Y:X}function W4(A,Y){return(A.pendingLanes&~(A.suspendedLanes&~A.pingedLanes)&Y)===0}function eM(A,Y){switch(A){case 1:case 2:case 4:case 8:case 64:return Y+250;case 16:case 32:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return Y+5000;case 4194304:case 8388608:case 16777216:case 33554432:return-1;case 67108864:case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}}function kZ(){var A=_4;return _4<<=1,(_4&62914560)===0&&(_4=4194304),A}function gH(A){for(var Y=[],G=0;31>G;G++)Y.push(A);return Y}function q4(A,Y){A.pendingLanes|=Y,Y!==268435456&&(A.suspendedLanes=0,A.pingedLanes=0,A.warmLanes=0)}function AJ(A,Y,G,H,X,w){var Z=A.pendingLanes;A.pendingLanes=G,A.suspendedLanes=0,A.pingedLanes=0,A.warmLanes=0,A.expiredLanes&=G,A.entangledLanes&=G,A.errorRecoveryDisabledLanes&=G,A.shellSuspendCounter=0;var{entanglements:W,expirationTimes:q,hiddenUpdates:R}=A;for(G=Z&~G;0"u")return null;try{return A.activeElement||A.body}catch(Y){return A.body}}function h0(A){return A.replace(ZJ,function(Y){return"\\"+Y.charCodeAt(0).toString(16)+" "})}function F8(A,Y,G,H,X,w,Z,W){if(A.name="",Z!=null&&typeof Z!=="function"&&typeof Z!=="symbol"&&typeof Z!=="boolean"?A.type=Z:A.removeAttribute("type"),Y!=null)if(Z==="number"){if(Y===0&&A.value===""||A.value!=Y)A.value=""+_0(Y)}else A.value!==""+_0(Y)&&(A.value=""+_0(Y));else Z!=="submit"&&Z!=="reset"||A.removeAttribute("value");Y!=null?V8(A,Z,_0(Y)):G!=null?V8(A,Z,_0(G)):H!=null&&A.removeAttribute("value"),X==null&&w!=null&&(A.defaultChecked=!!w),X!=null&&(A.checked=X&&typeof X!=="function"&&typeof X!=="symbol"),W!=null&&typeof W!=="function"&&typeof W!=="symbol"&&typeof W!=="boolean"?A.name=""+_0(W):A.removeAttribute("name")}function dZ(A,Y,G,H,X,w,Z,W){if(w!=null&&typeof w!=="function"&&typeof w!=="symbol"&&typeof w!=="boolean"&&(A.type=w),Y!=null||G!=null){if(!(w!=="submit"&&w!=="reset"||Y!==void 0&&Y!==null)){Q8(A);return}G=G!=null?""+_0(G):"",Y=Y!=null?""+_0(Y):G,W||Y===A.value||(A.value=Y),A.defaultValue=Y}H=H!=null?H:X,H=typeof H!=="function"&&typeof H!=="symbol"&&!!H,A.checked=W?A.checked:!!H,A.defaultChecked=!!H,Z!=null&&typeof Z!=="function"&&typeof Z!=="symbol"&&typeof Z!=="boolean"&&(A.name=Z),Q8(A)}function V8(A,Y,G){Y==="number"&&MG(A.ownerDocument)===A||A.defaultValue===""+G||(A.defaultValue=""+G)}function mY(A,Y,G,H){if(A=A.options,Y){Y={};for(var X=0;X=Y)return{node:G,offset:Y-A};A=H}A:{for(;G;){if(G.nextSibling){G=G.nextSibling;break A}G=G.parentNode}G=void 0}G=Q9(G)}}function eZ(A,Y){return A&&Y?A===Y?!0:A&&A.nodeType===3?!1:Y&&Y.nodeType===3?eZ(A,Y.parentNode):("contains"in A)?A.contains(Y):A.compareDocumentPosition?!!(A.compareDocumentPosition(Y)&16):!1:!1}function AW(A){A=A!=null&&A.ownerDocument!=null&&A.ownerDocument.defaultView!=null?A.ownerDocument.defaultView:window;for(var Y=MG(A.document);Y instanceof A.HTMLIFrameElement;){try{var G=typeof Y.contentWindow.location.href==="string"}catch(H){G=!1}if(G)A=Y.contentWindow;else break;Y=MG(A.document)}return Y}function DX(A){var Y=A&&A.nodeName&&A.nodeName.toLowerCase();return Y&&(Y==="input"&&(A.type==="text"||A.type==="search"||A.type==="tel"||A.type==="url"||A.type==="password")||Y==="textarea"||A.contentEditable==="true")}function V9(A,Y,G){var H=G.window===G?G.document:G.nodeType===9?G:G.ownerDocument;T8||PY==null||PY!==MG(H)||(H=PY,("selectionStart"in H)&&DX(H)?H={start:H.selectionStart,end:H.selectionEnd}:(H=(H.ownerDocument&&H.ownerDocument.defaultView||window).getSelection(),H={anchorNode:H.anchorNode,anchorOffset:H.anchorOffset,focusNode:H.focusNode,focusOffset:H.focusOffset}),P6&&r6(P6,H)||(P6=H,H=jG(K8,"onSelect"),0>=Z,X-=Z,o0=1<<32-N0(Y)+X|G<N?(x=V,V=null):x=V.sibling;var g=L(J,V,B[N],D);if(g===null){V===null&&(V=x);break}A&&V&&g.alternate===null&&Y(J,V),U=w(g,U,N),$===null?K=g:$.sibling=g,$=g,V=x}if(N===B.length)return G(J,V),_&&WA(J,N),K;if(V===null){for(;NN?(x=V,V=null):x=V.sibling;var OA=L(J,V,g.value,D);if(OA===null){V===null&&(V=x);break}A&&V&&OA.alternate===null&&Y(J,V),U=w(OA,U,N),$===null?K=OA:$.sibling=OA,$=OA,V=x}if(g.done)return G(J,V),_&&WA(J,N),K;if(V===null){for(;!g.done;N++,g=B.next())g=Q(J,g.value,D),g!==null&&(U=w(g,U,N),$===null?K=g:$.sibling=g,$=g);return _&&WA(J,N),K}for(V=H(V);!g.done;N++,g=B.next())g=f(V,J,N,g.value,D),g!==null&&(A&&g.alternate!==null&&V.delete(g.key===null?N:g.key),U=w(g,U,N),$===null?K=g:$.sibling=g,$=g);return A&&V.forEach(function(TU){return Y(J,TU)}),_&&WA(J,N),K}function P(J,U,B,D){if(typeof B==="object"&&B!==null&&B.type===CY&&B.key===null&&(B=B.props.children),typeof B==="object"&&B!==null){switch(B.$$typeof){case $4:A:{for(var K=B.key;U!==null;){if(U.key===K){if(K=B.type,K===CY){if(U.tag===7){G(J,U.sibling),D=X(U,B.props.children),D.return=J,J=D;break A}}else if(U.elementType===K||typeof K==="object"&&K!==null&&K.$$typeof===bA&&YY(K)===U.type){G(J,U.sibling),D=X(U,B.props),F6(D,B),D.return=J,J=D;break A}G(J,U);break}else Y(J,U);U=U.sibling}B.type===CY?(D=XY(B.props.children,J.mode,D,B.key),D.return=J,J=D):(D=o4(B.type,B.key,B.props,null,J.mode,D),F6(D,B),D.return=J,J=D)}return Z(J);case K6:A:{for(K=B.key;U!==null;){if(U.key===K)if(U.tag===4&&U.stateNode.containerInfo===B.containerInfo&&U.stateNode.implementation===B.implementation){G(J,U.sibling),D=X(U,B.children||[]),D.return=J,J=D;break A}else{G(J,U);break}else Y(J,U);U=U.sibling}D=mH(B,J.mode,D),D.return=J,J=D}return Z(J);case bA:return B=YY(B),P(J,U,B,D)}if(T6(B))return I(J,U,B,D);if(D6(B)){if(K=D6(B),typeof K!=="function")throw Error(F(150));return B=K.call(B),T(J,U,B,D)}if(typeof B.then==="function")return P(J,U,E4(B),D);if(B.$$typeof===UA)return P(J,U,h4(J,B),D);y4(J,B)}return typeof B==="string"&&B!==""||typeof B==="number"||typeof B==="bigint"?(B=""+B,U!==null&&U.tag===6?(G(J,U.sibling),D=X(U,B),D.return=J,J=D):(G(J,U),D=dH(B,J.mode,D),D.return=J,J=D),Z(J)):G(J,U)}return function(J,U,B,D){try{n6=0;var K=P(J,U,B,D);return iY=null,K}catch(V){if(V===q6||V===mG)throw V;var $=K0(29,V,null,J.mode);return $.lanes=D,$.return=J,$}finally{}}}function SX(A){A.updateQueue={baseState:A.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,lanes:0,hiddenCallbacks:null},callbacks:null}}function x8(A,Y){A=A.updateQueue,Y.updateQueue===A&&(Y.updateQueue={baseState:A.baseState,firstBaseUpdate:A.firstBaseUpdate,lastBaseUpdate:A.lastBaseUpdate,shared:A.shared,callbacks:null})}function yA(A){return{lane:A,tag:0,payload:null,callback:null,next:null}}function vA(A,Y,G){var H=A.updateQueue;if(H===null)return null;if(H=H.shared,(h&2)!==0){var X=H.pending;return X===null?Y.next=Y:(Y.next=X.next,X.next=Y),H.pending=Y,Y=RG(A),WW(A,null,G),Y}return dG(A,H,Y,G),RG(A)}function h6(A,Y,G){if(Y=Y.updateQueue,Y!==null&&(Y=Y.shared,(G&4194048)!==0)){var H=Y.lanes;H&=A.pendingLanes,G|=H,Y.lanes=G,PZ(A,G)}}function cH(A,Y){var{updateQueue:G,alternate:H}=A;if(H!==null&&(H=H.updateQueue,G===H)){var X=null,w=null;if(G=G.firstBaseUpdate,G!==null){do{var Z={lane:G.lane,tag:G.tag,payload:G.payload,callback:null,next:null};w===null?X=w=Z:w=w.next=Z,G=G.next}while(G!==null);w===null?X=w=Y:w=w.next=Y}else X=w=Y;G={baseState:H.baseState,firstBaseUpdate:X,lastBaseUpdate:w,shared:H.shared,callbacks:H.callbacks},A.updateQueue=G;return}A=G.lastBaseUpdate,A===null?G.firstBaseUpdate=Y:A.next=Y,G.lastBaseUpdate=Y}function E6(){if(k8){var A=cY;if(A!==null)throw A}}function y6(A,Y,G,H){k8=!1;var X=A.updateQueue;SA=!1;var{firstBaseUpdate:w,lastBaseUpdate:Z}=X,W=X.shared.pending;if(W!==null){X.shared.pending=null;var q=W,R=q.next;q.next=null,Z===null?w=R:Z.next=R,Z=q;var z=A.alternate;z!==null&&(z=z.updateQueue,W=z.lastBaseUpdate,W!==Z&&(W===null?z.firstBaseUpdate=R:W.next=R,z.lastBaseUpdate=q))}if(w!==null){var Q=X.baseState;Z=0,z=R=q=null,W=w;do{var L=W.lane&-536870913,f=L!==W.lane;if(f?(k&L)===L:(H&L)===L){L!==0&&L===nY&&(k8=!0),z!==null&&(z=z.next={lane:0,tag:W.tag,payload:W.payload,callback:null,next:null});A:{var I=A,T=W;L=Y;var P=G;switch(T.tag){case 1:if(I=T.payload,typeof I==="function"){Q=I.call(P,Q,L);break A}Q=I;break A;case 3:I.flags=I.flags&-65537|128;case 0:if(I=T.payload,L=typeof I==="function"?I.call(P,Q,L):I,L===null||L===void 0)break A;Q=s({},Q,L);break A;case 2:SA=!0}}L=W.callback,L!==null&&(A.flags|=64,f&&(A.flags|=8192),f=X.callbacks,f===null?X.callbacks=[L]:f.push(L))}else f={lane:L,tag:W.tag,payload:W.payload,callback:W.callback,next:null},z===null?(R=z=f,q=Q):z=z.next=f,Z|=L;if(W=W.next,W===null)if(W=X.shared.pending,W===null)break;else f=W,W=f.next,f.next=null,X.lastBaseUpdate=f,X.shared.pending=null}while(1);z===null&&(q=Q),X.baseState=q,X.firstBaseUpdate=R,X.lastBaseUpdate=z,w===null&&(X.shared.lanes=0),rA|=Z,A.lanes=Z,A.memoizedState=Q}}function DW(A,Y){if(typeof A!=="function")throw Error(F(191,A));A.call(Y)}function QW(A,Y){var G=A.callbacks;if(G!==null)for(A.callbacks=null,A=0;Aw?w:8;var Z=b.T,W={};b.T=W,vX(A,!1,Y,G);try{var q=X(),R=b.S;if(R!==null&&R(W,q),q!==null&&typeof q==="object"&&typeof q.then==="function"){var z=A1(q,H);v6(A,Y,z,j0(A))}else v6(A,Y,H,j0(A))}catch(Q){v6(A,Y,{then:function(){},status:"rejected",reason:Q},j0())}finally{E.p=w,Z!==null&&W.types!==null&&(Z.types=W.types),b.T=Z}}function Z1(){}function E8(A,Y,G,H){if(A.tag!==5)throw Error(F(476));var X=lW(A).queue;mW(A,X,Y,HY,G===null?Z1:function(){return cW(A),G(H)})}function lW(A){var Y=A.memoizedState;if(Y!==null)return Y;Y={memoizedState:HY,baseState:HY,baseQueue:null,queue:{pending:null,lanes:0,dispatch:null,lastRenderedReducer:DA,lastRenderedState:HY},next:null};var G={};return Y.next={memoizedState:G,baseState:G,baseQueue:null,queue:{pending:null,lanes:0,dispatch:null,lastRenderedReducer:DA,lastRenderedState:G},next:null},A.memoizedState=Y,A=A.alternate,A!==null&&(A.memoizedState=Y),Y}function cW(A){var Y=lW(A);Y.next===null&&(Y=A.alternate.memoizedState),v6(A,Y.next.queue,{},j0())}function yX(){return M0(G4)}function iW(){return t().memoizedState}function pW(){return t().memoizedState}function W1(A){for(var Y=A.return;Y!==null;){switch(Y.tag){case 24:case 3:var G=j0();A=yA(G);var H=vA(Y,A,G);H!==null&&(Q0(H,Y,G),h6(H,Y,G)),Y={cache:KX()},A.payload=Y;return}Y=Y.return}}function q1(A,Y,G){var H=j0();G={lane:H,revertLane:0,gesture:null,action:G,hasEagerState:!1,eagerState:null,next:null},pG(A)?rW(Y,G):(G=FX(A,Y,G,H),G!==null&&(Q0(G,A,H),oW(G,Y,H)))}function sW(A,Y,G){var H=j0();v6(A,Y,G,H)}function v6(A,Y,G,H){var X={lane:H,revertLane:0,gesture:null,action:G,hasEagerState:!1,eagerState:null,next:null};if(pG(A))rW(Y,X);else{var w=A.alternate;if(A.lanes===0&&(w===null||w.lanes===0)&&(w=Y.lastRenderedReducer,w!==null))try{var Z=Y.lastRenderedState,W=w(Z,G);if(X.hasEagerState=!0,X.eagerState=W,C0(W,Z))return dG(A,Y,X,0),m===null&&uG(),!1}catch(q){}finally{}if(G=FX(A,Y,X,H),G!==null)return Q0(G,A,H),oW(G,Y,H),!0}return!1}function vX(A,Y,G,H){if(H={lane:2,revertLane:rX(),gesture:null,action:H,hasEagerState:!1,eagerState:null,next:null},pG(A)){if(Y)throw Error(F(479))}else Y=FX(A,G,H,2),Y!==null&&Q0(Y,A,2)}function pG(A){var Y=A.alternate;return A===S||Y!==null&&Y===S}function rW(A,Y){pY=QG=!0;var G=A.pending;G===null?Y.next=Y:(Y.next=G.next,G.next=Y),A.pending=Y}function oW(A,Y,G){if((G&4194048)!==0){var H=Y.lanes;H&=A.pendingLanes,G|=H,Y.lanes=G,PZ(A,G)}}function pH(A,Y,G,H){Y=A.memoizedState,G=G(H,Y),G=G===null||G===void 0?Y:s({},Y,G),A.memoizedState=G,A.lanes===0&&(A.updateQueue.baseState=G)}function h9(A,Y,G,H,X,w,Z){return A=A.stateNode,typeof A.shouldComponentUpdate==="function"?A.shouldComponentUpdate(H,w,Z):Y.prototype&&Y.prototype.isPureReactComponent?!r6(G,H)||!r6(X,w):!0}function E9(A,Y,G,H){A=Y.state,typeof Y.componentWillReceiveProps==="function"&&Y.componentWillReceiveProps(G,H),typeof Y.UNSAFE_componentWillReceiveProps==="function"&&Y.UNSAFE_componentWillReceiveProps(G,H),Y.state!==A&&y8.enqueueReplaceState(Y,Y.state,null)}function RY(A,Y){var G=Y;if("ref"in Y){G={};for(var H in Y)H!=="ref"&&(G[H]=Y[H])}if(A=A.defaultProps){G===Y&&(G=s({},G));for(var X in A)G[X]===void 0&&(G[X]=A[X])}return G}function tW(A){JG(A)}function eW(A){console.error(A)}function Aq(A){JG(A)}function VG(A,Y){try{var G=A.onUncaughtError;G(Y.value,{componentStack:Y.stack})}catch(H){setTimeout(function(){throw H})}}function y9(A,Y,G){try{var H=A.onCaughtError;H(G.value,{componentStack:G.stack,errorBoundary:Y.tag===1?Y.stateNode:null})}catch(X){setTimeout(function(){throw X})}}function v8(A,Y,G){return G=yA(G),G.tag=3,G.payload={element:null},G.callback=function(){VG(A,Y)},G}function Yq(A){return A=yA(A),A.tag=3,A}function Gq(A,Y,G,H){var X=G.type.getDerivedStateFromError;if(typeof X==="function"){var w=H.value;A.payload=function(){return X(w)},A.callback=function(){y9(Y,G,H)}}var Z=G.stateNode;Z!==null&&typeof Z.componentDidCatch==="function"&&(A.callback=function(){y9(Y,G,H),typeof X!=="function"&&(uA===null?uA=new Set([this]):uA.add(this));var W=H.stack;this.componentDidCatch(H.value,{componentStack:W!==null?W:""})})}function U1(A,Y,G,H,X){if(G.flags|=32768,H!==null&&typeof H==="object"&&typeof H.then==="function"){if(Y=G.alternate,Y!==null&&W6(Y,G,X,!0),G=$0.current,G!==null){switch(G.tag){case 31:case 13:return v0===null?bG():G.alternate===null&&a===0&&(a=3),G.flags&=-257,G.flags|=65536,G.lanes=X,H===fG?G.flags|=16384:(Y=G.updateQueue,Y===null?G.updateQueue=new Set([H]):Y.add(H),H8(A,H,X)),!1;case 22:return G.flags|=65536,H===fG?G.flags|=16384:(Y=G.updateQueue,Y===null?(Y={transitions:null,markerInstances:null,retryQueue:new Set([H])},G.updateQueue=Y):(G=Y.retryQueue,G===null?Y.retryQueue=new Set([H]):G.add(H)),H8(A,H,X)),!1}throw Error(F(435,G.tag))}return H8(A,H,X),bG(),!1}if(_)return Y=$0.current,Y!==null?((Y.flags&65536)===0&&(Y.flags|=256),Y.flags|=65536,Y.lanes=X,H!==S8&&(A=Error(F(422),{cause:H}),a6(E0(A,G)))):(H!==S8&&(Y=Error(F(423),{cause:H}),a6(E0(Y,G))),A=A.current.alternate,A.flags|=65536,X&=-X,A.lanes|=X,H=E0(H,G),X=v8(A.stateNode,H,X),cH(A,X),a!==4&&(a=2)),!1;var w=Error(F(520),{cause:H});if(w=E0(w,G),m6===null?m6=[w]:m6.push(w),a!==4&&(a=2),Y===null)return!0;H=E0(H,G),G=Y;do{switch(G.tag){case 3:return G.flags|=65536,A=X&-X,G.lanes|=A,A=v8(G.stateNode,H,A),cH(G,A),!1;case 1:if(Y=G.type,w=G.stateNode,(G.flags&128)===0&&(typeof Y.getDerivedStateFromError==="function"||w!==null&&typeof w.componentDidCatch==="function"&&(uA===null||!uA.has(w))))return G.flags|=65536,X&=-X,G.lanes|=X,X=Yq(X),Gq(X,A,G,H),cH(G,X),!1}G=G.return}while(G!==null);return!1}function W0(A,Y,G,H){Y.child=A===null?zW(Y,null,G,H):MY(Y,A.child,G,H)}function v9(A,Y,G,H,X){G=G.render;var w=Y.ref;if("ref"in H){var Z={};for(var W in H)W!=="ref"&&(Z[W]=H[W])}else Z=H;if(UY(Y),H=CX(A,Y,G,Z,w,X),W=$X(),A!==null&&!G0)return xX(A,Y,X),QA(A,Y,X);return _&&W&&IX(Y),Y.flags|=1,W0(A,Y,H,X),Y.child}function u9(A,Y,G,H,X){if(A===null){var w=G.type;if(typeof w==="function"&&!VX(w)&&w.defaultProps===void 0&&G.compare===null)return Y.tag=15,Y.type=w,Hq(A,Y,w,H,X);return A=o4(G.type,null,H,Y,Y.mode,X),A.ref=Y.ref,A.return=Y,Y.child=A}if(w=A.child,!mX(A,X)){var Z=w.memoizedProps;if(G=G.compare,G=G!==null?G:r6,G(Z,H)&&A.ref===Y.ref)return QA(A,Y,X)}return Y.flags|=1,A=RA(w,H),A.ref=Y.ref,A.return=Y,Y.child=A}function Hq(A,Y,G,H,X){if(A!==null){var w=A.memoizedProps;if(r6(w,H)&&A.ref===Y.ref)if(G0=!1,Y.pendingProps=H=w,mX(A,X))(A.flags&131072)!==0&&(G0=!0);else return Y.lanes=A.lanes,QA(A,Y,X)}return u8(A,Y,G,H,X)}function Xq(A,Y,G,H){var X=H.children,w=A!==null?A.memoizedState:null;if(A===null&&Y.stateNode===null&&(Y.stateNode={_visibility:1,_pendingMarkers:null,_retryCache:null,_transitions:null}),H.mode==="hidden"){if((Y.flags&128)!==0){if(w=w!==null?w.baseLanes|G:G,A!==null){H=Y.child=A.child;for(X=0;H!==null;)X=X|H.lanes|H.childLanes,H=H.sibling;H=X&~w}else H=0,Y.child=null;return d9(A,Y,w,G,H)}if((G&536870912)!==0)Y.memoizedState={baseLanes:0,cachePool:null},A!==null&&a4(Y,w!==null?w.cachePool:null),w!==null?C9(Y,w):_8(),FW(Y);else return H=Y.lanes=536870912,d9(A,Y,w!==null?w.baseLanes|G:G,G,H)}else w!==null?(a4(Y,w.cachePool),C9(Y,w),CA(Y),Y.memoizedState=null):(A!==null&&a4(Y,null),_8(),CA(Y));return W0(A,Y,X,G),Y.child}function j6(A,Y){return A!==null&&A.tag===22||Y.stateNode!==null||(Y.stateNode={_visibility:1,_pendingMarkers:null,_retryCache:null,_transitions:null}),Y.sibling}function d9(A,Y,G,H,X){var w=TX();return w=w===null?null:{parent:Y0._currentValue,pool:w},Y.memoizedState={baseLanes:G,cachePool:w},A!==null&&a4(Y,null),_8(),FW(Y),A!==null&&W6(A,Y,H,!0),Y.childLanes=X,null}function e4(A,Y){return Y=IG({mode:Y.mode,children:Y.children},A.mode),Y.ref=A.ref,A.child=Y,Y.return=A,Y}function m9(A,Y,G){return MY(Y,A.child,null,G),A=e4(Y,Y.pendingProps),A.flags|=2,O0(Y),Y.memoizedState=null,A}function M1(A,Y,G){var H=Y.pendingProps,X=(Y.flags&128)!==0;if(Y.flags&=-129,A===null){if(_){if(H.mode==="hidden")return A=e4(Y,H),Y.lanes=536870912,j6(null,A);if(P8(Y),(A=p)?(A=aq(A,y0),A=A!==null&&A.data==="&"?A:null,A!==null&&(Y.memoizedState={dehydrated:A,treeContext:iA!==null?{id:o0,overflow:a0}:null,retryLane:536870912,hydrationErrors:null},G=UW(A),G.return=Y,Y.child=G,U0=Y,p=null)):A=null,A===null)throw pA(Y);return Y.lanes=536870912,null}return e4(Y,H)}var w=A.memoizedState;if(w!==null){var Z=w.dehydrated;if(P8(Y),X)if(Y.flags&256)Y.flags&=-257,Y=m9(A,Y,G);else if(Y.memoizedState!==null)Y.child=A.child,Y.flags|=128,Y=null;else throw Error(F(558));else if(G0||W6(A,Y,G,!1),X=(G&A.childLanes)!==0,G0||X){if(H=m,H!==null&&(Z=gZ(H,G),Z!==0&&Z!==w.retryLane))throw w.retryLane=Z,zY(A,Z),Q0(H,A,Z),dX;bG(),Y=m9(A,Y,G)}else A=w.treeContext,p=u0(Z.nextSibling),U0=Y,_=!0,EA=null,y0=!1,A!==null&&JW(Y,A),Y=e4(Y,H),Y.flags|=4096;return Y}return A=RA(A.child,{mode:H.mode,children:H.children}),A.ref=Y.ref,Y.child=A,A.return=Y,A}function AG(A,Y){var G=Y.ref;if(G===null)A!==null&&A.ref!==null&&(Y.flags|=4194816);else{if(typeof G!=="function"&&typeof G!=="object")throw Error(F(284));if(A===null||A.ref!==G)Y.flags|=4194816}}function u8(A,Y,G,H,X){if(UY(Y),G=CX(A,Y,G,H,void 0,X),H=$X(),A!==null&&!G0)return xX(A,Y,X),QA(A,Y,X);return _&&H&&IX(Y),Y.flags|=1,W0(A,Y,G,X),Y.child}function l9(A,Y,G,H,X,w){if(UY(Y),Y.updateQueue=null,G=IW(Y,H,G,X),VW(A),H=$X(),A!==null&&!G0)return xX(A,Y,w),QA(A,Y,w);return _&&H&&IX(Y),Y.flags|=1,W0(A,Y,G,w),Y.child}function c9(A,Y,G,H,X){if(UY(Y),Y.stateNode===null){var w=EY,Z=G.contextType;typeof Z==="object"&&Z!==null&&(w=M0(Z)),w=new G(H,w),Y.memoizedState=w.state!==null&&w.state!==void 0?w.state:null,w.updater=y8,Y.stateNode=w,w._reactInternals=Y,w=Y.stateNode,w.props=H,w.state=Y.memoizedState,w.refs={},SX(Y),Z=G.contextType,w.context=typeof Z==="object"&&Z!==null?M0(Z):EY,w.state=Y.memoizedState,Z=G.getDerivedStateFromProps,typeof Z==="function"&&(pH(Y,G,Z,H),w.state=Y.memoizedState),typeof G.getDerivedStateFromProps==="function"||typeof w.getSnapshotBeforeUpdate==="function"||typeof w.UNSAFE_componentWillMount!=="function"&&typeof w.componentWillMount!=="function"||(Z=w.state,typeof w.componentWillMount==="function"&&w.componentWillMount(),typeof w.UNSAFE_componentWillMount==="function"&&w.UNSAFE_componentWillMount(),Z!==w.state&&y8.enqueueReplaceState(w,w.state,null),y6(Y,H,w,X),E6(),w.state=Y.memoizedState),typeof w.componentDidMount==="function"&&(Y.flags|=4194308),H=!0}else if(A===null){w=Y.stateNode;var W=Y.memoizedProps,q=RY(G,W);w.props=q;var R=w.context,z=G.contextType;Z=EY,typeof z==="object"&&z!==null&&(Z=M0(z));var Q=G.getDerivedStateFromProps;z=typeof Q==="function"||typeof w.getSnapshotBeforeUpdate==="function",W=Y.pendingProps!==W,z||typeof w.UNSAFE_componentWillReceiveProps!=="function"&&typeof w.componentWillReceiveProps!=="function"||(W||R!==Z)&&E9(Y,w,H,Z),SA=!1;var L=Y.memoizedState;w.state=L,y6(Y,H,w,X),E6(),R=Y.memoizedState,W||L!==R||SA?(typeof Q==="function"&&(pH(Y,G,Q,H),R=Y.memoizedState),(q=SA||h9(Y,G,q,H,L,R,Z))?(z||typeof w.UNSAFE_componentWillMount!=="function"&&typeof w.componentWillMount!=="function"||(typeof w.componentWillMount==="function"&&w.componentWillMount(),typeof w.UNSAFE_componentWillMount==="function"&&w.UNSAFE_componentWillMount()),typeof w.componentDidMount==="function"&&(Y.flags|=4194308)):(typeof w.componentDidMount==="function"&&(Y.flags|=4194308),Y.memoizedProps=H,Y.memoizedState=R),w.props=H,w.state=R,w.context=Z,H=q):(typeof w.componentDidMount==="function"&&(Y.flags|=4194308),H=!1)}else{w=Y.stateNode,x8(A,Y),Z=Y.memoizedProps,z=RY(G,Z),w.props=z,Q=Y.pendingProps,L=w.context,R=G.contextType,q=EY,typeof R==="object"&&R!==null&&(q=M0(R)),W=G.getDerivedStateFromProps,(R=typeof W==="function"||typeof w.getSnapshotBeforeUpdate==="function")||typeof w.UNSAFE_componentWillReceiveProps!=="function"&&typeof w.componentWillReceiveProps!=="function"||(Z!==Q||L!==q)&&E9(Y,w,H,q),SA=!1,L=Y.memoizedState,w.state=L,y6(Y,H,w,X),E6();var f=Y.memoizedState;Z!==Q||L!==f||SA||A!==null&&A.dependencies!==null&&LG(A.dependencies)?(typeof W==="function"&&(pH(Y,G,W,H),f=Y.memoizedState),(z=SA||h9(Y,G,z,H,L,f,q)||A!==null&&A.dependencies!==null&&LG(A.dependencies))?(R||typeof w.UNSAFE_componentWillUpdate!=="function"&&typeof w.componentWillUpdate!=="function"||(typeof w.componentWillUpdate==="function"&&w.componentWillUpdate(H,f,q),typeof w.UNSAFE_componentWillUpdate==="function"&&w.UNSAFE_componentWillUpdate(H,f,q)),typeof w.componentDidUpdate==="function"&&(Y.flags|=4),typeof w.getSnapshotBeforeUpdate==="function"&&(Y.flags|=1024)):(typeof w.componentDidUpdate!=="function"||Z===A.memoizedProps&&L===A.memoizedState||(Y.flags|=4),typeof w.getSnapshotBeforeUpdate!=="function"||Z===A.memoizedProps&&L===A.memoizedState||(Y.flags|=1024),Y.memoizedProps=H,Y.memoizedState=f),w.props=H,w.state=f,w.context=q,H=z):(typeof w.componentDidUpdate!=="function"||Z===A.memoizedProps&&L===A.memoizedState||(Y.flags|=4),typeof w.getSnapshotBeforeUpdate!=="function"||Z===A.memoizedProps&&L===A.memoizedState||(Y.flags|=1024),H=!1)}return w=H,AG(A,Y),H=(Y.flags&128)!==0,w||H?(w=Y.stateNode,G=H&&typeof G.getDerivedStateFromError!=="function"?null:w.render(),Y.flags|=1,A!==null&&H?(Y.child=MY(Y,A.child,null,X),Y.child=MY(Y,null,G,X)):W0(A,Y,G,X),Y.memoizedState=w.state,A=Y.child):A=QA(A,Y,X),A}function i9(A,Y,G,H){return qY(),Y.flags|=256,W0(A,Y,G,H),Y.child}function rH(A){return{baseLanes:A,cachePool:BW()}}function oH(A,Y,G){return A=A!==null?A.childLanes&~G:0,Y&&(A|=T0),A}function wq(A,Y,G){var H=Y.pendingProps,X=!1,w=(Y.flags&128)!==0,Z;if((Z=w)||(Z=A!==null&&A.memoizedState===null?!1:(n.current&2)!==0),Z&&(X=!0,Y.flags&=-129),Z=(Y.flags&32)!==0,Y.flags&=-33,A===null){if(_){if(X?jA(Y):CA(Y),(A=p)?(A=aq(A,y0),A=A!==null&&A.data!=="&"?A:null,A!==null&&(Y.memoizedState={dehydrated:A,treeContext:iA!==null?{id:o0,overflow:a0}:null,retryLane:536870912,hydrationErrors:null},G=UW(A),G.return=Y,Y.child=G,U0=Y,p=null)):A=null,A===null)throw pA(Y);return GX(A)?Y.lanes=32:Y.lanes=536870912,null}var W=H.children;if(H=H.fallback,X)return CA(Y),X=Y.mode,W=IG({mode:"hidden",children:W},X),H=XY(H,X,G,null),W.return=Y,H.return=Y,W.sibling=H,Y.child=W,H=Y.child,H.memoizedState=rH(G),H.childLanes=oH(A,Z,G),Y.memoizedState=sH,j6(null,H);return jA(Y),d8(Y,W)}var q=A.memoizedState;if(q!==null&&(W=q.dehydrated,W!==null)){if(w)Y.flags&256?(jA(Y),Y.flags&=-257,Y=aH(A,Y,G)):Y.memoizedState!==null?(CA(Y),Y.child=A.child,Y.flags|=128,Y=null):(CA(Y),W=H.fallback,X=Y.mode,H=IG({mode:"visible",children:H.children},X),W=XY(W,X,G,null),W.flags|=2,H.return=Y,W.return=Y,H.sibling=W,Y.child=H,MY(Y,A.child,null,G),H=Y.child,H.memoizedState=rH(G),H.childLanes=oH(A,Z,G),Y.memoizedState=sH,Y=j6(null,H));else if(jA(Y),GX(W)){if(Z=W.nextSibling&&W.nextSibling.dataset,Z)var R=Z.dgst;Z=R,H=Error(F(419)),H.stack="",H.digest=Z,a6({value:H,source:null,stack:null}),Y=aH(A,Y,G)}else if(G0||W6(A,Y,G,!1),Z=(G&A.childLanes)!==0,G0||Z){if(Z=m,Z!==null&&(H=gZ(Z,G),H!==0&&H!==q.retryLane))throw q.retryLane=H,zY(A,H),Q0(Z,A,H),dX;YX(W)||bG(),Y=aH(A,Y,G)}else YX(W)?(Y.flags|=192,Y.child=A.child,Y=null):(A=q.treeContext,p=u0(W.nextSibling),U0=Y,_=!0,EA=null,y0=!1,A!==null&&JW(Y,A),Y=d8(Y,H.children),Y.flags|=4096);return Y}if(X)return CA(Y),W=H.fallback,X=Y.mode,q=A.child,R=q.sibling,H=RA(q,{mode:"hidden",children:H.children}),H.subtreeFlags=q.subtreeFlags&65011712,R!==null?W=RA(R,W):(W=XY(W,X,G,null),W.flags|=2),W.return=Y,H.return=Y,H.sibling=W,Y.child=H,j6(null,H),H=Y.child,W=A.child.memoizedState,W===null?W=rH(G):(X=W.cachePool,X!==null?(q=Y0._currentValue,X=X.parent!==q?{parent:q,pool:q}:X):X=BW(),W={baseLanes:W.baseLanes|G,cachePool:X}),H.memoizedState=W,H.childLanes=oH(A,Z,G),Y.memoizedState=sH,j6(A.child,H);return jA(Y),G=A.child,A=G.sibling,G=RA(G,{mode:"visible",children:H.children}),G.return=Y,G.sibling=null,A!==null&&(Z=Y.deletions,Z===null?(Y.deletions=[A],Y.flags|=16):Z.push(A)),Y.child=G,Y.memoizedState=null,G}function d8(A,Y){return Y=IG({mode:"visible",children:Y},A.mode),Y.return=A,A.child=Y}function IG(A,Y){return A=K0(22,A,null,Y),A.lanes=0,A}function aH(A,Y,G){return MY(Y,A.child,null,G),A=d8(Y,Y.pendingProps.children),A.flags|=2,Y.memoizedState=null,A}function p9(A,Y,G){A.lanes|=Y;var H=A.alternate;H!==null&&(H.lanes|=Y),j8(A.return,Y,G)}function nH(A,Y,G,H,X,w){var Z=A.memoizedState;Z===null?A.memoizedState={isBackwards:Y,rendering:null,renderingStartTime:0,last:H,tail:G,tailMode:X,treeForkCount:w}:(Z.isBackwards=Y,Z.rendering=null,Z.renderingStartTime=0,Z.last=H,Z.tail=G,Z.tailMode=X,Z.treeForkCount=w)}function Zq(A,Y,G){var H=Y.pendingProps,X=H.revealOrder,w=H.tail;H=H.children;var Z=n.current,W=(Z&2)!==0;if(W?(Z=Z&1|2,Y.flags|=128):Z&=1,l(n,Z),W0(A,Y,H,G),H=_?o6:0,!W&&A!==null&&(A.flags&128)!==0)A:for(A=Y.child;A!==null;){if(A.tag===13)A.memoizedState!==null&&p9(A,G,Y);else if(A.tag===19)p9(A,G,Y);else if(A.child!==null){A.child.return=A,A=A.child;continue}if(A===Y)break A;for(;A.sibling===null;){if(A.return===null||A.return===Y)break A;A=A.return}A.sibling.return=A.return,A=A.sibling}switch(X){case"forwards":G=Y.child;for(X=null;G!==null;)A=G.alternate,A!==null&&DG(A)===null&&(X=G),G=G.sibling;G=X,G===null?(X=Y.child,Y.child=null):(X=G.sibling,G.sibling=null),nH(Y,!1,X,G,w,H);break;case"backwards":case"unstable_legacy-backwards":G=null,X=Y.child;for(Y.child=null;X!==null;){if(A=X.alternate,A!==null&&DG(A)===null){Y.child=X;break}A=X.sibling,X.sibling=G,G=X,X=A}nH(Y,!0,G,null,w,H);break;case"together":nH(Y,!1,null,null,void 0,H);break;default:Y.memoizedState=null}return Y.child}function QA(A,Y,G){if(A!==null&&(Y.dependencies=A.dependencies),rA|=Y.lanes,(G&Y.childLanes)===0)if(A!==null){if(W6(A,Y,G,!1),(G&Y.childLanes)===0)return null}else return null;if(A!==null&&Y.child!==A.child)throw Error(F(153));if(Y.child!==null){A=Y.child,G=RA(A,A.pendingProps),Y.child=G;for(G.return=Y;A.sibling!==null;)A=A.sibling,G=G.sibling=RA(A,A.pendingProps),G.return=Y;G.sibling=null}return Y.child}function mX(A,Y){if((A.lanes&Y)!==0)return!0;return A=A.dependencies,A!==null&&LG(A)?!0:!1}function J1(A,Y,G){switch(Y.tag){case 3:WG(Y,Y.stateNode.containerInfo),NA(Y,Y0,A.memoizedState.cache),qY();break;case 27:case 5:f8(Y);break;case 4:WG(Y,Y.stateNode.containerInfo);break;case 10:NA(Y,Y.type,Y.memoizedProps.value);break;case 31:if(Y.memoizedState!==null)return Y.flags|=128,P8(Y),null;break;case 13:var H=Y.memoizedState;if(H!==null){if(H.dehydrated!==null)return jA(Y),Y.flags|=128,null;if((G&Y.child.childLanes)!==0)return wq(A,Y,G);return jA(Y),A=QA(A,Y,G),A!==null?A.sibling:null}jA(Y);break;case 19:var X=(A.flags&128)!==0;if(H=(G&Y.childLanes)!==0,H||(W6(A,Y,G,!1),H=(G&Y.childLanes)!==0),X){if(H)return Zq(A,Y,G);Y.flags|=128}if(X=Y.memoizedState,X!==null&&(X.rendering=null,X.tail=null,X.lastEffect=null),l(n,n.current),H)break;else return null;case 22:return Y.lanes=0,Xq(A,Y,G,Y.pendingProps);case 24:NA(Y,Y0,A.memoizedState.cache)}return QA(A,Y,G)}function Wq(A,Y,G){if(A!==null)if(A.memoizedProps!==Y.pendingProps)G0=!0;else{if(!mX(A,G)&&(Y.flags&128)===0)return G0=!1,J1(A,Y,G);G0=(A.flags&131072)!==0?!0:!1}else G0=!1,_&&(Y.flags&1048576)!==0&&MW(Y,o6,Y.index);switch(Y.lanes=0,Y.tag){case 16:A:{var H=Y.pendingProps;if(A=YY(Y.elementType),Y.type=A,typeof A==="function")VX(A)?(H=RY(A,H),Y.tag=1,Y=c9(null,Y,A,H,G)):(Y.tag=0,Y=u8(null,Y,A,H,G));else{if(A!==void 0&&A!==null){var X=A.$$typeof;if(X===ZX){Y.tag=11,Y=v9(null,Y,A,H,G);break A}else if(X===WX){Y.tag=14,Y=u9(null,Y,A,H,G);break A}}throw Y=B8(A)||A,Error(F(306,Y,""))}}return Y;case 0:return u8(A,Y,Y.type,Y.pendingProps,G);case 1:return H=Y.type,X=RY(H,Y.pendingProps),c9(A,Y,H,X,G);case 3:A:{if(WG(Y,Y.stateNode.containerInfo),A===null)throw Error(F(387));H=Y.pendingProps;var w=Y.memoizedState;X=w.element,x8(A,Y),y6(Y,H,null,G);var Z=Y.memoizedState;if(H=Z.cache,NA(Y,Y0,H),H!==w.cache&&C8(Y,[Y0],G,!0),E6(),H=Z.element,w.isDehydrated)if(w={element:H,isDehydrated:!1,cache:Z.cache},Y.updateQueue.baseState=w,Y.memoizedState=w,Y.flags&256){Y=i9(A,Y,H,G);break A}else if(H!==X){X=E0(Error(F(424)),Y),a6(X),Y=i9(A,Y,H,G);break A}else{switch(A=Y.stateNode.containerInfo,A.nodeType){case 9:A=A.body;break;default:A=A.nodeName==="HTML"?A.ownerDocument.body:A}p=u0(A.firstChild),U0=Y,_=!0,EA=null,y0=!0,G=zW(Y,null,H,G);for(Y.child=G;G;)G.flags=G.flags&-3|4096,G=G.sibling}else{if(qY(),H===X){Y=QA(A,Y,G);break A}W0(A,Y,H,G)}Y=Y.child}return Y;case 26:return AG(A,Y),A===null?(G=RZ(Y.type,null,Y.pendingProps,null))?Y.memoizedState=G:_||(G=Y.type,A=Y.pendingProps,H=CG(hA.current).createElement(G),H[q0]=Y,H[F0]=A,J0(H,G,A),w0(H),Y.stateNode=H):Y.memoizedState=RZ(Y.type,A.memoizedProps,Y.pendingProps,A.memoizedState),null;case 27:return f8(Y),A===null&&_&&(H=Y.stateNode=nq(Y.type,Y.pendingProps,hA.current),U0=Y,y0=!0,X=p,aA(Y.type)?(HX=X,p=u0(H.firstChild)):p=X),W0(A,Y,Y.pendingProps.children,G),AG(A,Y),A===null&&(Y.flags|=4194304),Y.child;case 5:if(A===null&&_){if(X=H=p)H=v1(H,Y.type,Y.pendingProps,y0),H!==null?(Y.stateNode=H,U0=Y,p=u0(H.firstChild),y0=!1,X=!0):X=!1;X||pA(Y)}return f8(Y),X=Y.type,w=Y.pendingProps,Z=A!==null?A.memoizedProps:null,H=w.children,e8(X,w)?H=null:Z!==null&&e8(X,Z)&&(Y.flags|=32),Y.memoizedState!==null&&(X=CX(A,Y,G1,null,null,G),G4._currentValue=X),AG(A,Y),W0(A,Y,H,G),Y.child;case 6:if(A===null&&_){if(A=G=p)G=u1(G,Y.pendingProps,y0),G!==null?(Y.stateNode=G,U0=Y,p=null,A=!0):A=!1;A||pA(Y)}return null;case 13:return wq(A,Y,G);case 4:return WG(Y,Y.stateNode.containerInfo),H=Y.pendingProps,A===null?Y.child=MY(Y,null,H,G):W0(A,Y,H,G),Y.child;case 11:return v9(A,Y,Y.type,Y.pendingProps,G);case 7:return W0(A,Y,Y.pendingProps,G),Y.child;case 8:return W0(A,Y,Y.pendingProps.children,G),Y.child;case 12:return W0(A,Y,Y.pendingProps.children,G),Y.child;case 10:return H=Y.pendingProps,NA(Y,Y.type,H.value),W0(A,Y,H.children,G),Y.child;case 9:return X=Y.type._context,H=Y.pendingProps.children,UY(Y),X=M0(X),H=H(X),Y.flags|=1,W0(A,Y,H,G),Y.child;case 14:return u9(A,Y,Y.type,Y.pendingProps,G);case 15:return Hq(A,Y,Y.type,Y.pendingProps,G);case 19:return Zq(A,Y,G);case 31:return M1(A,Y,G);case 22:return Xq(A,Y,G,Y.pendingProps);case 24:return UY(Y),H=M0(Y0),A===null?(X=TX(),X===null&&(X=m,w=KX(),X.pooledCache=w,w.refCount++,w!==null&&(X.pooledCacheLanes|=G),X=w),Y.memoizedState={parent:H,cache:X},SX(Y),NA(Y,Y0,X)):((A.lanes&G)!==0&&(x8(A,Y),y6(Y,null,null,G),E6()),X=A.memoizedState,w=Y.memoizedState,X.parent!==H?(X={parent:H,cache:H},Y.memoizedState=X,Y.lanes===0&&(Y.memoizedState=Y.updateQueue.baseState=X),NA(Y,Y0,H)):(H=w.cache,NA(Y,Y0,H),H!==X.cache&&C8(Y,[Y0],G,!0))),W0(A,Y,Y.pendingProps.children,G),Y.child;case 29:throw Y.pendingProps}throw Error(F(156,Y.tag))}function HA(A){A.flags|=4}function tH(A,Y,G,H,X){if(Y=(A.mode&32)!==0)Y=!1;if(Y){if(A.flags|=16777216,(X&335544128)===X)if(A.stateNode.complete)A.flags|=8192;else if(xq())A.flags|=8192;else throw ZY=fG,bX}else A.flags&=-16777217}function s9(A,Y){if(Y.type!=="stylesheet"||(Y.state.loading&4)!==0)A.flags&=-16777217;else if(A.flags|=16777216,!AU(Y))if(xq())A.flags|=8192;else throw ZY=fG,bX}function v4(A,Y){Y!==null&&(A.flags|=4),A.flags&16384&&(Y=A.tag!==22?kZ():536870912,A.lanes|=Y,A6|=Y)}function V6(A,Y){if(!_)switch(A.tailMode){case"hidden":Y=A.tail;for(var G=null;Y!==null;)Y.alternate!==null&&(G=Y),Y=Y.sibling;G===null?A.tail=null:G.sibling=null;break;case"collapsed":G=A.tail;for(var H=null;G!==null;)G.alternate!==null&&(H=G),G=G.sibling;H===null?Y||A.tail===null?A.tail=null:A.tail.sibling=null:H.sibling=null}}function i(A){var Y=A.alternate!==null&&A.alternate.child===A.child,G=0,H=0;if(Y)for(var X=A.child;X!==null;)G|=X.lanes|X.childLanes,H|=X.subtreeFlags&65011712,H|=X.flags&65011712,X.return=A,X=X.sibling;else for(X=A.child;X!==null;)G|=X.lanes|X.childLanes,H|=X.subtreeFlags,H|=X.flags,X.return=A,X=X.sibling;return A.subtreeFlags|=H,A.childLanes=G,Y}function R1(A,Y,G){var H=Y.pendingProps;switch(OX(Y),Y.tag){case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return i(Y),null;case 1:return i(Y),null;case 3:if(G=Y.stateNode,H=null,A!==null&&(H=A.memoizedState.cache),Y.memoizedState.cache!==H&&(Y.flags|=2048),BA(Y0),rY(),G.pendingContext&&(G.context=G.pendingContext,G.pendingContext=null),A===null||A.child===null)TY(Y)?HA(Y):A===null||A.memoizedState.isDehydrated&&(Y.flags&256)===0||(Y.flags|=1024,lH());return i(Y),null;case 26:var{type:X,memoizedState:w}=Y;return A===null?(HA(Y),w!==null?(i(Y),s9(Y,w)):(i(Y),tH(Y,X,null,H,G))):w?w!==A.memoizedState?(HA(Y),i(Y),s9(Y,w)):(i(Y),Y.flags&=-16777217):(A=A.memoizedProps,A!==H&&HA(Y),i(Y),tH(Y,X,A,H,G)),null;case 27:if(qG(Y),G=hA.current,X=Y.type,A!==null&&Y.stateNode!=null)A.memoizedProps!==H&&HA(Y);else{if(!H){if(Y.stateNode===null)throw Error(F(166));return i(Y),null}A=t0.current,TY(Y)?O9(Y,A):(A=nq(X,H,G),Y.stateNode=A,HA(Y))}return i(Y),null;case 5:if(qG(Y),X=Y.type,A!==null&&Y.stateNode!=null)A.memoizedProps!==H&&HA(Y);else{if(!H){if(Y.stateNode===null)throw Error(F(166));return i(Y),null}if(w=t0.current,TY(Y))O9(Y,w);else{var Z=CG(hA.current);switch(w){case 1:w=Z.createElementNS("http://www.w3.org/2000/svg",X);break;case 2:w=Z.createElementNS("http://www.w3.org/1998/Math/MathML",X);break;default:switch(X){case"svg":w=Z.createElementNS("http://www.w3.org/2000/svg",X);break;case"math":w=Z.createElementNS("http://www.w3.org/1998/Math/MathML",X);break;case"script":w=Z.createElement("div"),w.innerHTML="",w=w.removeChild(w.firstChild);break;case"select":w=typeof H.is==="string"?Z.createElement("select",{is:H.is}):Z.createElement("select"),H.multiple?w.multiple=!0:H.size&&(w.size=H.size);break;default:w=typeof H.is==="string"?Z.createElement(X,{is:H.is}):Z.createElement(X)}}w[q0]=Y,w[F0]=H;A:for(Z=Y.child;Z!==null;){if(Z.tag===5||Z.tag===6)w.appendChild(Z.stateNode);else if(Z.tag!==4&&Z.tag!==27&&Z.child!==null){Z.child.return=Z,Z=Z.child;continue}if(Z===Y)break A;for(;Z.sibling===null;){if(Z.return===null||Z.return===Y)break A;Z=Z.return}Z.sibling.return=Z.return,Z=Z.sibling}Y.stateNode=w;A:switch(J0(w,X,H),X){case"button":case"input":case"select":case"textarea":H=!!H.autoFocus;break A;case"img":H=!0;break A;default:H=!1}H&&HA(Y)}}return i(Y),tH(Y,Y.type,A===null?null:A.memoizedProps,Y.pendingProps,G),null;case 6:if(A&&Y.stateNode!=null)A.memoizedProps!==H&&HA(Y);else{if(typeof H!=="string"&&Y.stateNode===null)throw Error(F(166));if(A=hA.current,TY(Y)){if(A=Y.stateNode,G=Y.memoizedProps,H=null,X=U0,X!==null)switch(X.tag){case 27:case 5:H=X.memoizedProps}A[q0]=Y,A=A.nodeValue===G||H!==null&&H.suppressHydrationWarning===!0||sq(A.nodeValue,G)?!0:!1,A||pA(Y,!0)}else A=CG(A).createTextNode(H),A[q0]=Y,Y.stateNode=A}return i(Y),null;case 31:if(G=Y.memoizedState,A===null||A.memoizedState!==null){if(H=TY(Y),G!==null){if(A===null){if(!H)throw Error(F(318));if(A=Y.memoizedState,A=A!==null?A.dehydrated:null,!A)throw Error(F(557));A[q0]=Y}else qY(),(Y.flags&128)===0&&(Y.memoizedState=null),Y.flags|=4;i(Y),A=!1}else G=lH(),A!==null&&A.memoizedState!==null&&(A.memoizedState.hydrationErrors=G),A=!0;if(!A){if(Y.flags&256)return O0(Y),Y;return O0(Y),null}if((Y.flags&128)!==0)throw Error(F(558))}return i(Y),null;case 13:if(H=Y.memoizedState,A===null||A.memoizedState!==null&&A.memoizedState.dehydrated!==null){if(X=TY(Y),H!==null&&H.dehydrated!==null){if(A===null){if(!X)throw Error(F(318));if(X=Y.memoizedState,X=X!==null?X.dehydrated:null,!X)throw Error(F(317));X[q0]=Y}else qY(),(Y.flags&128)===0&&(Y.memoizedState=null),Y.flags|=4;i(Y),X=!1}else X=lH(),A!==null&&A.memoizedState!==null&&(A.memoizedState.hydrationErrors=X),X=!0;if(!X){if(Y.flags&256)return O0(Y),Y;return O0(Y),null}}if(O0(Y),(Y.flags&128)!==0)return Y.lanes=G,Y;return G=H!==null,A=A!==null&&A.memoizedState!==null,G&&(H=Y.child,X=null,H.alternate!==null&&H.alternate.memoizedState!==null&&H.alternate.memoizedState.cachePool!==null&&(X=H.alternate.memoizedState.cachePool.pool),w=null,H.memoizedState!==null&&H.memoizedState.cachePool!==null&&(w=H.memoizedState.cachePool.pool),w!==X&&(H.flags|=2048)),G!==A&&G&&(Y.child.flags|=8192),v4(Y,Y.updateQueue),i(Y),null;case 4:return rY(),A===null&&oX(Y.stateNode.containerInfo),i(Y),null;case 10:return BA(Y.type),i(Y),null;case 19:if(Z0(n),H=Y.memoizedState,H===null)return i(Y),null;if(X=(Y.flags&128)!==0,w=H.rendering,w===null)if(X)V6(H,!1);else{if(a!==0||A!==null&&(A.flags&128)!==0)for(A=Y.child;A!==null;){if(w=DG(A),w!==null){Y.flags|=128,V6(H,!1),A=w.updateQueue,Y.updateQueue=A,v4(Y,A),Y.subtreeFlags=0,A=G;for(G=Y.child;G!==null;)qW(G,A),G=G.sibling;return l(n,n.current&1|2),_&&WA(Y,H.treeForkCount),Y.child}A=A.sibling}H.tail!==null&&b0()>KG&&(Y.flags|=128,X=!0,V6(H,!1),Y.lanes=4194304)}else{if(!X)if(A=DG(w),A!==null){if(Y.flags|=128,X=!0,A=A.updateQueue,Y.updateQueue=A,v4(Y,A),V6(H,!0),H.tail===null&&H.tailMode==="hidden"&&!w.alternate&&!_)return i(Y),null}else 2*b0()-H.renderingStartTime>KG&&G!==536870912&&(Y.flags|=128,X=!0,V6(H,!1),Y.lanes=4194304);H.isBackwards?(w.sibling=Y.child,Y.child=w):(A=H.last,A!==null?A.sibling=w:Y.child=w,H.last=w)}if(H.tail!==null)return A=H.tail,H.rendering=A,H.tail=A.sibling,H.renderingStartTime=b0(),A.sibling=null,G=n.current,l(n,X?G&1|2:G&1),_&&WA(Y,H.treeForkCount),A;return i(Y),null;case 22:case 23:return O0(Y),NX(),H=Y.memoizedState!==null,A!==null?A.memoizedState!==null!==H&&(Y.flags|=8192):H&&(Y.flags|=8192),H?(G&536870912)!==0&&(Y.flags&128)===0&&(i(Y),Y.subtreeFlags&6&&(Y.flags|=8192)):i(Y),G=Y.updateQueue,G!==null&&v4(Y,G.retryQueue),G=null,A!==null&&A.memoizedState!==null&&A.memoizedState.cachePool!==null&&(G=A.memoizedState.cachePool.pool),H=null,Y.memoizedState!==null&&Y.memoizedState.cachePool!==null&&(H=Y.memoizedState.cachePool.pool),H!==G&&(Y.flags|=2048),A!==null&&Z0(wY),null;case 24:return G=null,A!==null&&(G=A.memoizedState.cache),Y.memoizedState.cache!==G&&(Y.flags|=2048),BA(Y0),i(Y),null;case 25:return null;case 30:return null}throw Error(F(156,Y.tag))}function B1(A,Y){switch(OX(Y),Y.tag){case 1:return A=Y.flags,A&65536?(Y.flags=A&-65537|128,Y):null;case 3:return BA(Y0),rY(),A=Y.flags,(A&65536)!==0&&(A&128)===0?(Y.flags=A&-65537|128,Y):null;case 26:case 27:case 5:return qG(Y),null;case 31:if(Y.memoizedState!==null){if(O0(Y),Y.alternate===null)throw Error(F(340));qY()}return A=Y.flags,A&65536?(Y.flags=A&-65537|128,Y):null;case 13:if(O0(Y),A=Y.memoizedState,A!==null&&A.dehydrated!==null){if(Y.alternate===null)throw Error(F(340));qY()}return A=Y.flags,A&65536?(Y.flags=A&-65537|128,Y):null;case 19:return Z0(n),null;case 4:return rY(),null;case 10:return BA(Y.type),null;case 22:case 23:return O0(Y),NX(),A!==null&&Z0(wY),A=Y.flags,A&65536?(Y.flags=A&-65537|128,Y):null;case 24:return BA(Y0),null;case 25:return null;default:return null}}function qq(A,Y){switch(OX(Y),Y.tag){case 3:BA(Y0),rY();break;case 26:case 27:case 5:qG(Y);break;case 4:rY();break;case 31:Y.memoizedState!==null&&O0(Y);break;case 13:O0(Y);break;case 19:Z0(n);break;case 10:BA(Y.type);break;case 22:case 23:O0(Y),NX(),A!==null&&Z0(wY);break;case 24:BA(Y0)}}function B4(A,Y){try{var G=Y.updateQueue,H=G!==null?G.lastEffect:null;if(H!==null){var X=H.next;G=X;do{if((G.tag&A)===A){H=void 0;var{create:w,inst:Z}=G;H=w(),Z.destroy=H}G=G.next}while(G!==X)}}catch(W){v(Y,Y.return,W)}}function sA(A,Y,G){try{var H=Y.updateQueue,X=H!==null?H.lastEffect:null;if(X!==null){var w=X.next;H=w;do{if((H.tag&A)===A){var Z=H.inst,W=Z.destroy;if(W!==void 0){Z.destroy=void 0,X=Y;var q=G,R=W;try{R()}catch(z){v(X,q,z)}}}H=H.next}while(H!==w)}}catch(z){v(Y,Y.return,z)}}function Uq(A){var Y=A.updateQueue;if(Y!==null){var G=A.stateNode;try{QW(Y,G)}catch(H){v(A,A.return,H)}}}function Mq(A,Y,G){G.props=RY(A.type,A.memoizedProps),G.state=A.memoizedState;try{G.componentWillUnmount()}catch(H){v(A,Y,H)}}function u6(A,Y){try{var G=A.ref;if(G!==null){switch(A.tag){case 26:case 27:case 5:var H=A.stateNode;break;case 30:H=A.stateNode;break;default:H=A.stateNode}typeof G==="function"?A.refCleanup=G(H):G.current=H}}catch(X){v(A,Y,X)}}function n0(A,Y){var{ref:G,refCleanup:H}=A;if(G!==null)if(typeof H==="function")try{H()}catch(X){v(A,Y,X)}finally{A.refCleanup=null,A=A.alternate,A!=null&&(A.refCleanup=null)}else if(typeof G==="function")try{G(null)}catch(X){v(A,Y,X)}else G.current=null}function Jq(A){var{type:Y,memoizedProps:G,stateNode:H}=A;try{A:switch(Y){case"button":case"input":case"select":case"textarea":G.autoFocus&&H.focus();break A;case"img":G.src?H.src=G.src:G.srcSet&&(H.srcset=G.srcSet)}}catch(X){v(A,A.return,X)}}function eH(A,Y,G){try{var H=A.stateNode;_1(H,A.type,G,Y),H[F0]=Y}catch(X){v(A,A.return,X)}}function Rq(A){return A.tag===5||A.tag===3||A.tag===26||A.tag===27&&aA(A.type)||A.tag===4}function A8(A){A:for(;;){for(;A.sibling===null;){if(A.return===null||Rq(A.return))return null;A=A.return}A.sibling.return=A.return;for(A=A.sibling;A.tag!==5&&A.tag!==6&&A.tag!==18;){if(A.tag===27&&aA(A.type))continue A;if(A.flags&2)continue A;if(A.child===null||A.tag===4)continue A;else A.child.return=A,A=A.child}if(!(A.flags&2))return A.stateNode}}function m8(A,Y,G){var H=A.tag;if(H===5||H===6)A=A.stateNode,Y?(G.nodeType===9?G.body:G.nodeName==="HTML"?G.ownerDocument.body:G).insertBefore(A,Y):(Y=G.nodeType===9?G.body:G.nodeName==="HTML"?G.ownerDocument.body:G,Y.appendChild(A),G=G._reactRootContainer,G!==null&&G!==void 0||Y.onclick!==null||(Y.onclick=MA));else if(H!==4&&(H===27&&aA(A.type)&&(G=A.stateNode,Y=null),A=A.child,A!==null))for(m8(A,Y,G),A=A.sibling;A!==null;)m8(A,Y,G),A=A.sibling}function OG(A,Y,G){var H=A.tag;if(H===5||H===6)A=A.stateNode,Y?G.insertBefore(A,Y):G.appendChild(A);else if(H!==4&&(H===27&&aA(A.type)&&(G=A.stateNode),A=A.child,A!==null))for(OG(A,Y,G),A=A.sibling;A!==null;)OG(A,Y,G),A=A.sibling}function Bq(A){var{stateNode:Y,memoizedProps:G}=A;try{for(var H=A.type,X=Y.attributes;X.length;)Y.removeAttributeNode(X[0]);J0(Y,H,G),Y[q0]=A,Y[F0]=G}catch(w){v(A,A.return,w)}}function L1(A,Y){if(A=A.containerInfo,n8=_G,A=AW(A),DX(A)){if("selectionStart"in A)var G={start:A.selectionStart,end:A.selectionEnd};else A:{G=(G=A.ownerDocument)&&G.defaultView||window;var H=G.getSelection&&G.getSelection();if(H&&H.rangeCount!==0){G=H.anchorNode;var{anchorOffset:X,focusNode:w}=H;H=H.focusOffset;try{G.nodeType,w.nodeType}catch(T){G=null;break A}var Z=0,W=-1,q=-1,R=0,z=0,Q=A,L=null;Y:for(;;){for(var f;;){if(Q!==G||X!==0&&Q.nodeType!==3||(W=Z+X),Q!==w||H!==0&&Q.nodeType!==3||(q=Z+H),Q.nodeType===3&&(Z+=Q.nodeValue.length),(f=Q.firstChild)===null)break;L=Q,Q=f}for(;;){if(Q===A)break Y;if(L===G&&++R===X&&(W=Z),L===w&&++z===H&&(q=Z),(f=Q.nextSibling)!==null)break;Q=L,L=Q.parentNode}Q=f}G=W===-1||q===-1?null:{start:W,end:q}}else G=null}G=G||{start:0,end:0}}else G=null;t8={focusedElem:A,selectionRange:G},_G=!1;for(X0=Y;X0!==null;)if(Y=X0,A=Y.child,(Y.subtreeFlags&1028)!==0&&A!==null)A.return=Y,X0=A;else for(;X0!==null;){switch(Y=X0,w=Y.alternate,A=Y.flags,Y.tag){case 0:if((A&4)!==0&&(A=Y.updateQueue,A=A!==null?A.events:null,A!==null))for(G=0;G title"));J0(w,H,G),w[q0]=A,w0(w),H=w;break A;case"link":var Z=LZ("link","href",X).get(H+(G.href||""));if(Z){for(var W=0;WP&&(Z=P,P=T,T=Z);var J=F9(W,T),U=F9(W,P);if(J&&U&&(f.rangeCount!==1||f.anchorNode!==J.node||f.anchorOffset!==J.offset||f.focusNode!==U.node||f.focusOffset!==U.offset)){var B=Q.createRange();B.setStart(J.node,J.offset),f.removeAllRanges(),T>P?(f.addRange(B),f.extend(U.node,U.offset)):(B.setEnd(U.node,U.offset),f.addRange(B))}}}}Q=[];for(f=W;f=f.parentNode;)f.nodeType===1&&Q.push({element:f,left:f.scrollLeft,top:f.scrollTop});typeof W.focus==="function"&&W.focus();for(W=0;WG?32:G,b.T=null,G=i8,i8=null;var w=dA,Z=LA;if(H0=0,Y6=dA=null,LA=0,(h&6)!==0)throw Error(F(331));var W=h;if(h|=4,Tq(w.current),Iq(w,w.current,Z,G),h=W,L4(0,!1),S0&&typeof S0.onPostCommitFiberRoot==="function")try{S0.onPostCommitFiberRoot(Z4,w)}catch(q){}return!0}finally{E.p=X,b.T=H,vq(A,Y)}}function t9(A,Y,G){Y=E0(G,Y),Y=v8(A.stateNode,Y,2),A=vA(A,Y,2),A!==null&&(q4(A,2),AA(A))}function v(A,Y,G){if(A.tag===3)t9(A,A,G);else for(;Y!==null;){if(Y.tag===3){t9(Y,A,G);break}else if(Y.tag===1){var H=Y.stateNode;if(typeof Y.type.getDerivedStateFromError==="function"||typeof H.componentDidCatch==="function"&&(uA===null||!uA.has(H))){A=E0(G,A),G=Yq(2),H=vA(Y,G,2),H!==null&&(Gq(G,H,Y,A),q4(H,2),AA(H));break}}Y=Y.return}}function H8(A,Y,G){var H=A.pingCache;if(H===null){H=A.pingCache=new D1;var X=new Set;H.set(Y,X)}else X=H.get(Y),X===void 0&&(X=new Set,H.set(Y,X));X.has(G)||(iX=!0,X.add(G),A=O1.bind(null,A,Y,G),Y.then(A,A))}function O1(A,Y,G){var H=A.pingCache;H!==null&&H.delete(Y),A.pingedLanes|=A.suspendedLanes&G,A.warmLanes&=~G,m===A&&(k&G)===G&&(a===4||a===3&&(k&62914560)===k&&300>b0()-sG?(h&2)===0&&G6(A,0):pX|=G,A6===k&&(A6=0)),AA(A)}function dq(A,Y){Y===0&&(Y=kZ()),A=zY(A,Y),A!==null&&(q4(A,Y),AA(A))}function K1(A){var Y=A.memoizedState,G=0;Y!==null&&(G=Y.retryLane),dq(A,G)}function T1(A,Y){var G=0;switch(A.tag){case 31:case 13:var{stateNode:H,memoizedState:X}=A;X!==null&&(G=X.retryLane);break;case 19:H=A.stateNode;break;case 22:H=A.stateNode._retryCache;break;default:throw Error(F(314))}H!==null&&H.delete(Y),dq(A,G)}function b1(A,Y){return qX(A,Y)}function AA(A){A!==NY&&A.next===null&&(NY===null?SG=NY=A:NY=NY.next=A),NG=!0,s8||(s8=!0,N1())}function L4(A,Y){if(!X8&&NG){X8=!0;do{var G=!1;for(var H=SG;H!==null;){if(!Y)if(A!==0){var X=H.pendingLanes;if(X===0)var w=0;else{var{suspendedLanes:Z,pingedLanes:W}=H;w=(1<<31-N0(42|A)+1)-1,w&=X&~(Z&~W),w=w&201326741?w&201326741|1:w?w|2:0}w!==0&&(G=!0,e9(H,w))}else w=k,w=hG(H,H===m?w:0,H.cancelPendingCommit!==null||H.timeoutHandle!==-1),(w&3)===0||W4(H,w)||(G=!0,e9(H,w));H=H.next}}while(G);X8=!1}}function S1(){mq()}function mq(){NG=s8=!1;var A=0;gA!==0&&g1()&&(A=gA);for(var Y=b0(),G=null,H=SG;H!==null;){var X=H.next,w=lq(H,Y);if(w===0)H.next=null,G===null?SG=X:G.next=X,X===null&&(NY=G);else if(G=H,A!==0||(w&3)!==0)NG=!0;H=X}H0!==0&&H0!==5||L4(A,!1),gA!==0&&(gA=0)}function lq(A,Y){for(var{suspendedLanes:G,pingedLanes:H,expirationTimes:X}=A,w=A.pendingLanes&-62914561;0W)break;var{transferSize:z,initiatorType:Q}=q;z&&XZ(Q)&&(q=q.responseEnd,Z+=z*(q title"):null)}function t1(A,Y,G){if(G===1||Y.itemProp!=null)return!1;switch(A){case"meta":case"title":return!0;case"style":if(typeof Y.precedence!=="string"||typeof Y.href!=="string"||Y.href==="")break;return!0;case"link":if(typeof Y.rel!=="string"||typeof Y.href!=="string"||Y.href===""||Y.onLoad||Y.onError)break;switch(Y.rel){case"stylesheet":return A=Y.disabled,typeof Y.precedence==="string"&&A==null;default:return!0}case"script":if(Y.async&&typeof Y.async!=="function"&&typeof Y.async!=="symbol"&&!Y.onLoad&&!Y.onError&&Y.src&&typeof Y.src==="string")return!0}return!1}function AU(A){return A.type==="stylesheet"&&(A.state.loading&3)===0?!1:!0}function e1(A,Y,G,H){if(G.type==="stylesheet"&&(typeof H.media!=="string"||matchMedia(H.media).matches!==!1)&&(G.state.loading&4)===0){if(G.instance===null){var X=H6(H.href),w=Y.querySelector(f4(X));if(w){Y=w._p,Y!==null&&typeof Y==="object"&&typeof Y.then==="function"&&(A.count++,A=xG.bind(A),Y.then(A,A)),G.state.loading|=4,G.instance=w,w0(w);return}w=Y.ownerDocument||Y,H=eq(H),(X=d0.get(X))&&aX(H,X),w=w.createElement("link"),w0(w);var Z=w;Z._p=new Promise(function(W,q){Z.onload=W,Z.onerror=q}),J0(w,"link",H),G.instance=w}A.stylesheets===null&&(A.stylesheets=new Map),A.stylesheets.set(G,Y),(Y=G.state.preload)&&(G.state.loading&3)===0&&(A.count++,G=xG.bind(A),Y.addEventListener("load",G),Y.addEventListener("error",G))}}function AR(A,Y){return A.stylesheets&&A.count===0&&XG(A,A.stylesheets),0q8?50:800)+Y);return A.unsuspend=G,function(){A.unsuspend=null,clearTimeout(H),clearTimeout(X)}}:null}function xG(){if(this.count--,this.count===0&&(this.imgCount===0||!this.waitingForImages)){if(this.stylesheets)XG(this,this.stylesheets);else if(this.unsuspend){var A=this.unsuspend;this.unsuspend=null,A()}}}function XG(A,Y){A.stylesheets=null,A.unsuspend!==null&&(A.count++,kG=new Map,Y.forEach(YR,A),kG=null,xG.call(A))}function YR(A,Y){if(!(Y.state.loading&4)){var G=kG.get(A);if(G)var H=G.get(null);else{G=new Map,kG.set(A,G);for(var X=A.querySelectorAll("link[data-precedence],style[data-precedence]"),w=0;w{kw();gG=m0(p0(),1),OZ=m0(tw(),1);s=Object.assign,uM=Symbol.for("react.element"),$4=Symbol.for("react.transitional.element"),K6=Symbol.for("react.portal"),CY=Symbol.for("react.fragment"),NZ=Symbol.for("react.strict_mode"),U8=Symbol.for("react.profiler"),jZ=Symbol.for("react.consumer"),UA=Symbol.for("react.context"),ZX=Symbol.for("react.forward_ref"),M8=Symbol.for("react.suspense"),J8=Symbol.for("react.suspense_list"),WX=Symbol.for("react.memo"),bA=Symbol.for("react.lazy"),R8=Symbol.for("react.activity"),dM=Symbol.for("react.memo_cache_sentinel"),A9=Symbol.iterator;mM=Symbol.for("react.client.reference");T6=Array.isArray,b=gG.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,E=OZ.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,HY={pending:!1,data:null,method:null,action:null},L8=[];t0=e0(null),i6=e0(null),hA=e0(null),ZG=e0(null);z8=Object.prototype.hasOwnProperty,qX=KY,PH=SH,cM=CH,iM=jH,b0=r0,pM=NH,CZ=KH,$Z=bH,UG=OY,sM=TH,xZ=OH,rM=void 0,oM=void 0;N0=Math.clz32?Math.clz32:tM,aM=Math.log,nM=Math.LN2;oA=Math.random().toString(36).slice(2),q0="__reactFiber$"+oA,F0="__reactProps$"+oA,w6="__reactContainer$"+oA,D8="__reactEvents$"+oA,YJ="__reactListeners$"+oA,GJ="__reactHandles$"+oA,X9="__reactResources$"+oA,U4="__reactMarker$"+oA;EZ=new Set,yZ={};HJ=RegExp("^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$"),w9={},Z9={};ZJ=/[\n"\\]/g;WJ=new Set("animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth boxFlex boxFlexGroup boxOrdinalGroup columnCount columns flex flexGrow flexPositive flexShrink flexNegative flexOrder gridArea gridRow gridRowEnd gridRowSpan gridRowStart gridColumn gridColumnEnd gridColumnSpan gridColumnStart fontWeight lineClamp lineHeight opacity order orphans scale tabSize widows zIndex zoom fillOpacity floodOpacity stopOpacity strokeDasharray strokeDashoffset strokeMiterlimit strokeOpacity strokeWidth MozAnimationIterationCount MozBoxFlex MozBoxFlexGroup MozLineClamp msAnimationIterationCount msFlex msZoom msFlexGrow msFlexNegative msFlexOrder msFlexPositive msFlexShrink msGridColumn msGridColumnSpan msGridRow msGridRowSpan WebkitAnimationIterationCount WebkitBoxFlex WebKitBoxFlexGroup WebkitBoxOrdinalGroup WebkitColumnCount WebkitColumns WebkitFlex WebkitFlexGrow WebkitFlexPositive WebkitFlexShrink WebkitLineClamp".split(" "));qJ=new Map([["acceptCharset","accept-charset"],["htmlFor","for"],["httpEquiv","http-equiv"],["crossOrigin","crossorigin"],["accentHeight","accent-height"],["alignmentBaseline","alignment-baseline"],["arabicForm","arabic-form"],["baselineShift","baseline-shift"],["capHeight","cap-height"],["clipPath","clip-path"],["clipRule","clip-rule"],["colorInterpolation","color-interpolation"],["colorInterpolationFilters","color-interpolation-filters"],["colorProfile","color-profile"],["colorRendering","color-rendering"],["dominantBaseline","dominant-baseline"],["enableBackground","enable-background"],["fillOpacity","fill-opacity"],["fillRule","fill-rule"],["floodColor","flood-color"],["floodOpacity","flood-opacity"],["fontFamily","font-family"],["fontSize","font-size"],["fontSizeAdjust","font-size-adjust"],["fontStretch","font-stretch"],["fontStyle","font-style"],["fontVariant","font-variant"],["fontWeight","font-weight"],["glyphName","glyph-name"],["glyphOrientationHorizontal","glyph-orientation-horizontal"],["glyphOrientationVertical","glyph-orientation-vertical"],["horizAdvX","horiz-adv-x"],["horizOriginX","horiz-origin-x"],["imageRendering","image-rendering"],["letterSpacing","letter-spacing"],["lightingColor","lighting-color"],["markerEnd","marker-end"],["markerMid","marker-mid"],["markerStart","marker-start"],["overlinePosition","overline-position"],["overlineThickness","overline-thickness"],["paintOrder","paint-order"],["panose-1","panose-1"],["pointerEvents","pointer-events"],["renderingIntent","rendering-intent"],["shapeRendering","shape-rendering"],["stopColor","stop-color"],["stopOpacity","stop-opacity"],["strikethroughPosition","strikethrough-position"],["strikethroughThickness","strikethrough-thickness"],["strokeDasharray","stroke-dasharray"],["strokeDashoffset","stroke-dashoffset"],["strokeLinecap","stroke-linecap"],["strokeLinejoin","stroke-linejoin"],["strokeMiterlimit","stroke-miterlimit"],["strokeOpacity","stroke-opacity"],["strokeWidth","stroke-width"],["textAnchor","text-anchor"],["textDecoration","text-decoration"],["textRendering","text-rendering"],["transformOrigin","transform-origin"],["underlinePosition","underline-position"],["underlineThickness","underline-thickness"],["unicodeBidi","unicode-bidi"],["unicodeRange","unicode-range"],["unitsPerEm","units-per-em"],["vAlphabetic","v-alphabetic"],["vHanging","v-hanging"],["vIdeographic","v-ideographic"],["vMathematical","v-mathematical"],["vectorEffect","vector-effect"],["vertAdvY","vert-adv-y"],["vertOriginX","vert-origin-x"],["vertOriginY","vert-origin-y"],["wordSpacing","word-spacing"],["writingMode","writing-mode"],["xmlnsXlink","xmlns:xlink"],["xHeight","x-height"]]),UJ=/^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;fA=!(typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u");if(fA)try{AY={},Object.defineProperty(AY,"passive",{get:function(){O8=!0}}),window.addEventListener("test",AY,AY),window.removeEventListener("test",AY,AY)}catch(A){O8=!1}LY={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(A){return A.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},EG=V0(LY),M4=s({},LY,{view:0,detail:0}),MJ=V0(M4),yG=s({},M4,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:fX,button:0,buttons:0,relatedTarget:function(A){return A.relatedTarget===void 0?A.fromElement===A.srcElement?A.toElement:A.fromElement:A.relatedTarget},movementX:function(A){if("movementX"in A)return A.movementX;return A!==Q6&&(Q6&&A.type==="mousemove"?(EH=A.screenX-Q6.screenX,yH=A.screenY-Q6.screenY):yH=EH=0,Q6=A),EH},movementY:function(A){return"movementY"in A?A.movementY:yH}}),M9=V0(yG),JJ=s({},yG,{dataTransfer:0}),RJ=V0(JJ),BJ=s({},M4,{relatedTarget:0}),vH=V0(BJ),LJ=s({},LY,{animationName:0,elapsedTime:0,pseudoElement:0}),fJ=V0(LJ),zJ=s({},LY,{clipboardData:function(A){return"clipboardData"in A?A.clipboardData:window.clipboardData}}),DJ=V0(zJ),QJ=s({},LY,{data:0}),J9=V0(QJ),FJ={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},VJ={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},IJ={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};KJ=s({},M4,{key:function(A){if(A.key){var Y=FJ[A.key]||A.key;if(Y!=="Unidentified")return Y}return A.type==="keypress"?(A=s4(A),A===13?"Enter":String.fromCharCode(A)):A.type==="keydown"||A.type==="keyup"?VJ[A.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:fX,charCode:function(A){return A.type==="keypress"?s4(A):0},keyCode:function(A){return A.type==="keydown"||A.type==="keyup"?A.keyCode:0},which:function(A){return A.type==="keypress"?s4(A):A.type==="keydown"||A.type==="keyup"?A.keyCode:0}}),TJ=V0(KJ),bJ=s({},yG,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0}),R9=V0(bJ),SJ=s({},M4,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:fX}),NJ=V0(SJ),jJ=s({},LY,{propertyName:0,elapsedTime:0,pseudoElement:0}),CJ=V0(jJ),$J=s({},yG,{deltaX:function(A){return"deltaX"in A?A.deltaX:("wheelDeltaX"in A)?-A.wheelDeltaX:0},deltaY:function(A){return"deltaY"in A?A.deltaY:("wheelDeltaY"in A)?-A.wheelDeltaY:("wheelDelta"in A)?-A.wheelDelta:0},deltaZ:0,deltaMode:0}),xJ=V0($J),kJ=s({},LY,{newState:0,oldState:0}),_J=V0(kJ),PJ=[9,13,27,32],zX=fA&&"CompositionEvent"in window;fA&&"documentMode"in document&&(k6=document.documentMode);gJ=fA&&"TextEvent"in window&&!k6,sZ=fA&&(!zX||k6&&8=k6),B9=String.fromCharCode(32);yJ={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};if(fA){if(fA){if(N6="oninput"in document,!N6)r4=document.createElement("div"),r4.setAttribute("oninput","return;"),N6=typeof r4.oninput==="function";S6=N6}else S6=!1;nZ=S6&&(!document.documentMode||9=document.documentMode;gY={animationend:nA("Animation","AnimationEnd"),animationiteration:nA("Animation","AnimationIteration"),animationstart:nA("Animation","AnimationStart"),transitionrun:nA("Transition","TransitionRun"),transitionstart:nA("Transition","TransitionStart"),transitioncancel:nA("Transition","TransitionCancel"),transitionend:nA("Transition","TransitionEnd")},uH={},YW={};fA&&(YW=document.createElement("div").style,("AnimationEvent"in window)||(delete gY.animationend.animation,delete gY.animationiteration.animation,delete gY.animationstart.animation),("TransitionEvent"in window)||delete gY.transitionend.transition);GW=fY("animationend"),HW=fY("animationiteration"),XW=fY("animationstart"),pJ=fY("transitionrun"),sJ=fY("transitionstart"),rJ=fY("transitioncancel"),wW=fY("transitionend"),ZW=new Map,b8="abort auxClick beforeToggle cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");b8.push("scrollEnd");JG=typeof reportError==="function"?reportError:function(A){if(typeof window==="object"&&typeof window.ErrorEvent==="function"){var Y=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof A==="object"&&A!==null&&typeof A.message==="string"?String(A.message):String(A),error:A});if(!window.dispatchEvent(Y))return}else if(typeof process==="object"&&typeof process.emit==="function"){process.emit("uncaughtException",A);return}console.error(A)},k0=[];EY={};I9=new WeakMap;yY=[],P0=[];S8=Error(F(519));N8=e0(null);aJ=typeof AbortController<"u"?AbortController:function(){var A=[],Y=this.signal={aborted:!1,addEventListener:function(G,H){A.push(H)}};this.abort=function(){Y.aborted=!0,A.forEach(function(G){return G()})}},nJ=KY,tJ=OY,Y0={$$typeof:UA,Consumer:null,Provider:null,_currentValue:null,_currentValue2:null,_threadCount:0};b9=b.S;b.S=function(A,Y){Sq=b0(),typeof Y==="object"&&Y!==null&&typeof Y.then==="function"&&eJ(A,Y),b9!==null&&b9(A,Y)};wY=e0(null);q6=Error(F(460)),bX=Error(F(474)),mG=Error(F(542)),fG={then:function(){}};MY=fW(!0),zW=fW(!1);tY=e0(null),zG=e0(0);$0=e0(null);n=e0(0);e6={readContext:M0,use:cG,useCallback:o,useContext:o,useEffect:o,useImperativeHandle:o,useLayoutEffect:o,useInsertionEffect:o,useMemo:o,useReducer:o,useRef:o,useState:o,useDebugValue:o,useDeferredValue:o,useTransition:o,useSyncExternalStore:o,useId:o,useHostTransitionStatus:o,useFormState:o,useActionState:o,useOptimistic:o,useMemoCache:o,useCacheRefresh:o};e6.useEffectEvent=o;aW={readContext:M0,use:cG,useCallback:function(A,Y){return B0().memoizedState=[A,Y===void 0?null:Y],A},useContext:M0,useEffect:g9,useImperativeHandle:function(A,Y,G){G=G!==null&&G!==void 0?G.concat([A]):null,t4(4194308,4,EW.bind(null,Y,A),G)},useLayoutEffect:function(A,Y){return t4(4194308,4,A,Y)},useInsertionEffect:function(A,Y){t4(4,2,A,Y)},useMemo:function(A,Y){var G=B0();Y=Y===void 0?null:Y;var H=A();if(JY){xA(!0);try{A()}finally{xA(!1)}}return G.memoizedState=[H,Y],H},useReducer:function(A,Y,G){var H=B0();if(G!==void 0){var X=G(Y);if(JY){xA(!0);try{G(Y)}finally{xA(!1)}}}else X=Y;return H.memoizedState=H.baseState=X,A={pending:null,lanes:0,dispatch:null,lastRenderedReducer:A,lastRenderedState:X},H.queue=A,A=A.dispatch=q1.bind(null,S,A),[H.memoizedState,A]},useRef:function(A){var Y=B0();return A={current:A},Y.memoizedState=A},useState:function(A){A=g8(A);var Y=A.queue,G=sW.bind(null,S,Y);return Y.dispatch=G,[A.memoizedState,G]},useDebugValue:hX,useDeferredValue:function(A,Y){var G=B0();return EX(G,A,Y)},useTransition:function(){var A=g8(!1);return A=mW.bind(null,S,A.queue,!0,!1),B0().memoizedState=A,[!1,A]},useSyncExternalStore:function(A,Y,G){var H=S,X=B0();if(_){if(G===void 0)throw Error(F(407));G=G()}else{if(G=Y(),m===null)throw Error(F(349));(k&127)!==0||KW(H,Y,G)}X.memoizedState=G;var w={value:G,getSnapshot:Y};return X.queue=w,g9(bW.bind(null,H,w,A),[A]),H.flags|=2048,eY(9,{destroy:void 0},TW.bind(null,H,w,G,Y),null),G},useId:function(){var A=B0(),Y=m.identifierPrefix;if(_){var G=a0,H=o0;G=(H&~(1<<32-N0(H)-1)).toString(32)+G,Y="_"+Y+"R_"+G,G=FG++,0"u"?null:document;G4={$$typeof:UA,Provider:null,Consumer:null,_currentValue:HY,_currentValue2:HY,_threadCount:0};H4=new Map,X4=new Map,$A=[],wR="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset".split(" ");nG.prototype.render=Yw.prototype.render=function(A){var Y=this._internalRoot;if(Y===null)throw Error(F(409));var G=Y.current,H=j0();HU(G,H,A,Y,null,null)};nG.prototype.unmount=Yw.prototype.unmount=function(){var A=this._internalRoot;if(A!==null){this._internalRoot=null;var Y=A.containerInfo;HU(A.current,2,null,A,null,null),rG(),Y[w6]=null}};nG.prototype.unstable_scheduleHydration=function(A){if(A){var Y=hZ();A={blockedOn:null,target:A,priority:Y};for(var G=0;G<$A.length&&Y!==0&&Y<$A[G].priority;G++);$A.splice(G,0,A),G===0&&ZU(A)}};IZ=gG.version;if(IZ!=="19.2.3")throw Error(F(527,IZ,"19.2.3"));E.findDOMNode=function(A){var Y=A._reactInternals;if(Y===void 0){if(typeof A.render==="function")throw Error(F(188));throw A=Object.keys(A).join(","),Error(F(268,A))}return A=vM(Y),A=A!==null?SZ(A):null,A=A===null?null:A.stateNode,A};qR={bundleType:0,version:"19.2.3",rendererPackageName:"react-dom",currentDispatcherRef:b,reconcilerVersion:"19.2.3"};if(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"){if(jY=__REACT_DEVTOOLS_GLOBAL_HOOK__,!jY.isDisabled&&jY.supportsFiber)try{Z4=jY.inject(qR),S0=jY}catch(A){}}});var LU=XH((KR,BU)=>{JU();function RU(){if(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__>"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!=="function")return;try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(RU)}catch(A){console.error(A)}}RU(),BU.exports=Gw});var fw=m0(p0(),1),GH=m0(LU(),1);var D4=m0(p0(),1),Hw={},fU=D4.default.createContext(Hw);function Q4(A){let Y=D4.default.useContext(fU);return D4.default.useMemo(function(){if(typeof A==="function")return A(Y);return{...Y,...A}},[Y,A])}function Xw(A){let Y;if(A.disableParentContext)Y=typeof A.components==="function"?A.components(Hw):A.components||Hw;else Y=Q4(A.components);return D4.default.createElement(fU.Provider,{value:Y},A.children)}var JR=Symbol.for("react.transitional.element"),RR=Symbol.for("react.fragment");function zU(A,Y,G){var H=null;if(G!==void 0&&(H=""+G),Y.key!==void 0&&(H=""+Y.key),"key"in Y){G={};for(var X in Y)X!=="key"&&(G[X]=Y[X])}else G=Y;return Y=G.ref,{$$typeof:JR,type:A,key:H,ref:Y!==void 0?Y:null,props:G}}var F4=RR,M=zU,O=zU;function ww({children:A}){return M("span",{className:"font-bold bg-gradient-to-t from-red-600 via-orange-500 to-yellow-400 bg-clip-text text-transparent animate-pulse",children:A})}var I4=m0(p0(),1);var DU="scratch-demo-todos",V4=null,Zw=new Set;function R6(){if(V4===null)if(typeof window>"u")V4=[];else{let A=localStorage.getItem(DU);V4=A?JSON.parse(A):[]}return V4}function BR(A){if(typeof window>"u")return;localStorage.setItem(DU,JSON.stringify(A))}function LR(){Zw.forEach((A)=>A(R6()))}function fR(){let[A,Y]=I4.useState(()=>R6());I4.useEffect(()=>{Y(R6());let W=(q)=>Y(q);return Zw.add(W),()=>{Zw.delete(W)}},[]);let G=(W)=>{V4=W,BR(W),LR()};return{todos:A,addTodo:(W)=>{if(!W.trim())return;G([...R6(),{id:Date.now(),text:W.trim(),completed:!1}])},toggleTodo:(W)=>{G(R6().map((q)=>q.id===W?{...q,completed:!q.completed}:q))},deleteTodo:(W)=>{G(R6().filter((q)=>q.id!==W))},reset:()=>{G([])}}}function Ww(){let{todos:A,addTodo:Y,toggleTodo:G,deleteTodo:H,reset:X}=fR(),[w,Z]=I4.useState(""),W=()=>{Y(w),Z("")};return O("div",{className:"not-prose border border-gray-200 rounded-lg p-4 my-12 mx-2 sm:mx-8 md:mx-16 bg-gray-50",children:[O("div",{className:"flex gap-2 mb-4",children:[M("input",{type:"text",value:w,onChange:(q)=>Z(q.target.value),onKeyDown:(q)=>q.key==="Enter"&&W(),placeholder:"Add a todo...",className:"flex-1 px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-900 placeholder-gray-400"}),M("button",{onClick:W,className:"px-4 py-2 bg-gray-900 text-white rounded-md hover:bg-gray-700 transition-colors",children:"Add"})]}),A.length===0?M("p",{className:"text-gray-500 text-center py-4",children:"No todos yet. Add one above!"}):M("ul",{className:"space-y-2",children:A.map((q)=>O("li",{className:"flex items-center gap-3 p-2 rounded-md hover:bg-gray-100",children:[M("input",{type:"checkbox",checked:q.completed,onChange:()=>G(q.id),className:"w-4 h-4 rounded border-gray-300"}),M("span",{className:`flex-1 ${q.completed?"line-through text-gray-400":"text-gray-900"}`,children:q.text}),M("button",{onClick:()=>H(q.id),className:"text-gray-400 hover:text-red-500 transition-colors","aria-label":"Delete todo",children:M("svg",{xmlns:"http://www.w3.org/2000/svg",className:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:M("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})})]},q.id))}),O("div",{className:"mt-4 pt-4 border-t border-gray-200 flex justify-between items-center",children:[O("span",{className:"text-sm text-gray-500",children:[A.filter((q)=>!q.completed).length," remaining"]}),M("button",{onClick:X,className:"text-sm text-gray-500 hover:text-gray-700 transition-colors",children:"Reset"})]})]})}var IA=m0(p0(),1);function qw(){let A=IA.useRef(null),[Y,G]=IA.useState(0),[H,X]=IA.useState({x:20,y:20}),[w,Z]=IA.useState({x:2,y:1.5}),[W,q]=IA.useState("#8b5cf6"),R=80,z=40,Q=["#8b5cf6","#ec4899","#f59e0b","#10b981","#3b82f6","#ef4444"],L=()=>{let f=Q[Math.floor(Math.random()*Q.length)];return f===W?Q[(Q.indexOf(W)+1)%Q.length]:f};return IA.useEffect(()=>{let f=A.current;if(!f)return;let T=setInterval(()=>{X((P)=>{let{clientWidth:J,clientHeight:U}=f,B=P.x+w.x,D=P.y+w.y,K=!1,$=!1;if(B<=0)B=0,K=!0,Z((V)=>({...V,x:Math.abs(V.x)})),q(L());else if(B>=J-80)B=J-80,K=!0,Z((V)=>({...V,x:-Math.abs(V.x)})),q(L());if(D<=0){if(D=0,$=!0,Z((V)=>({...V,y:Math.abs(V.y)})),!K)q(L())}else if(D>=U-40){if(D=U-40,$=!0,Z((V)=>({...V,y:-Math.abs(V.y)})),!K)q(L())}if(K&&$)G((V)=>V+1);return{x:B,y:D}})},16);return()=>clearInterval(T)},[w]),O("div",{className:"not-prose my-6 mx-12",children:[M("div",{className:"bg-gradient-to-b from-gray-700 via-gray-800 to-gray-900 p-3 rounded-2xl shadow-xl",children:M("div",{className:"bg-black p-1 rounded-lg",children:O("div",{ref:A,className:"relative w-full h-48 rounded overflow-hidden",style:{background:"linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 50%, #1a1a2e 100%)"},children:[M("div",{className:"absolute",style:{left:H.x,top:H.y,width:80,height:40},children:M("div",{className:"transition-colors duration-300",style:{width:"100%",height:"100%",backgroundColor:W,maskImage:"url(/DVD_logo.svg)",maskSize:"contain",maskRepeat:"no-repeat",maskPosition:"center",WebkitMaskImage:"url(/DVD_logo.svg)",WebkitMaskSize:"contain",WebkitMaskRepeat:"no-repeat",WebkitMaskPosition:"center"}})}),M("div",{className:"absolute inset-0 pointer-events-none",style:{background:"linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%, transparent 100%)"}})]})})}),O("p",{className:"text-center text-sm text-gray-500 mt-3",children:["Corner hits: ",Y]})]})}function zR(A){let Y=A.trim().split(`
-`),G=[],H=[];for(let X of Y){if(!X.trim())continue;let w=X.match(/[^\s│|├└─]/);if(!w)continue;let Z=w.index,W=X.slice(0,Z),q=X.slice(Z).trim();if(!q)continue;let R=W.includes("└"),z=W.includes("├")||W.includes("└"),Q=(W.match(/[│|]/g)||[]).length,L;if(!z&&W.length===0)L=0,H.length=0;else{while(H.length>0){if(H.filter((P)=>!P.isLast).length<=Q)break;H.pop()}L=H.length+1}if(R)while(H.length>=L)H.pop();let f=H.map((T)=>T.isLast),I=q.endsWith("/")||!q.includes(".");if(G.push({name:q,depth:L,isLast:R,parentIsLast:f}),I)H.push({depth:L,isLast:R})}return G}function DR({node:A}){let Y=A.name.endsWith("/")||!A.name.includes(".");return O("div",{className:"flex items-stretch h-7 font-mono text-sm",children:[A.parentIsLast.map((G,H)=>M("div",{className:"w-5 flex-shrink-0 relative",children:!G&&M("div",{className:"absolute left-2 top-0 bottom-0 w-px bg-gray-300"})},H)),A.depth>0&&O("div",{className:"w-5 flex-shrink-0 relative",children:[M("div",{className:`absolute left-2 w-px bg-gray-300 ${A.isLast?"top-0 h-1/2":"top-0 bottom-0"}`}),M("div",{className:"absolute left-2 top-1/2 w-3 h-px bg-gray-300"})]}),M("span",{className:`flex items-center ${Y?"text-gray-700 font-bold":"text-gray-600"}`,children:A.name})]})}function tG(A){if(typeof A==="string")return A;if(typeof A==="number")return String(A);if(!A)return"";if(Array.isArray(A))return A.map(tG).join(`
-`);if(typeof A==="object"&&"props"in A){let Y=A;if(Y.type==="p"||Y.type==="br")return tG(Y.props.children)+`
-`;return tG(Y.props.children)}return""}function eG({children:A}){let Y=tG(A),G=zR(Y);return M("div",{className:"not-prose my-6 py-4 px-4",children:G.map((H,X)=>M(DR,{node:H},X))})}var QR=m0(p0(),1);function Uw({children:A}){return O("div",{className:"min-h-screen bg-white prose max-w-2xl mx-auto px-6 py-8",children:[O("div",{className:"not-prose flex justify-center gap-4 mb-4",children:[M("a",{href:"https://github.com/scratch/scratch",target:"_blank",rel:"noopener noreferrer",className:"opacity-30 hover:opacity-100 transition-opacity",children:M("img",{src:"/github-mark.svg",alt:"GitHub",className:"w-6 h-6"})}),M("a",{href:"https://x.com/koomen",target:"_blank",rel:"noopener noreferrer",className:"opacity-30 hover:opacity-100 transition-opacity",children:M("img",{src:"/x-logo.svg",alt:"X",className:"w-6 h-6"})})]}),A,O("footer",{className:"text-center text-gray-400 text-sm mt-16 pb-8",children:["Released under the MIT License",M("br",{}),"Copyright 2025 Pete Koomen"]})]})}function QU(A){let Y={a:"a",code:"code",div:"div",h2:"h2",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...Q4(),...A.components};return O(Uw,{children:[M("div",{className:"not-prose flex flex-col items-center justify-center mb-8",children:M("img",{src:"/scratch-logo.svg",alt:"Scratch",height:"120"})}),M(Y.p,{children:"Scratch compiles Markdown and React into beautiful static websites that can be hosted anywhere."}),M(Y.h2,{children:"Quick Start"}),M(F4,{children:M(Y.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0",children:O(Y.code,{children:[M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Install scratch"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"curl"}),M(Y.span,{style:{color:"#005CC5"},children:" -fsSL"}),M(Y.span,{style:{color:"#032F62"},children:" https://scratch.dev/install.sh"}),M(Y.span,{style:{color:"#D73A49"},children:" |"}),M(Y.span,{style:{color:"#6F42C1"},children:" bash"})]}),`
-`,M(Y.span,{className:"line"}),`
-`,M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Create a new project"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" create"})]}),`
-`,M(Y.span,{className:"line"}),`
-`,M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Start the dev server"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" dev"})]})]})})}),M(Y.h2,{children:"What can you do with Scratch?"}),O(Y.p,{children:["Scratch was designed for collaborative writing with coding agents like ",M(Y.a,{href:"https://www.claude.com/product/claude-code",children:"Claude Code"}),". Use your favorite editor to write in ",M(Y.a,{href:"https://daringfireball.net/projects/markdown/",children:"Markdown"})," and embed React components when it's easier to express yourself with code."]}),M(Y.p,{children:"Scratch supports Github-flavored Markdown features like tables and todolists:"}),O(Y.table,{children:[M(Y.thead,{children:O(Y.tr,{children:[M(Y.th,{children:"Feature"}),M(Y.th,{children:"Supported?"})]})}),O(Y.tbody,{children:[O(Y.tr,{children:[O(Y.td,{children:["Compiles ",M(Y.code,{children:".md"})," ",M(Y.code,{children:".mdx"})," ",M(Y.code,{children:".tsx"})," ",M(Y.code,{children:".ts"})," ",M(Y.code,{children:".jsx"})," ",M(Y.code,{children:".js"})]}),M(Y.td,{children:"✅"})]}),O(Y.tr,{children:[M(Y.td,{children:"Dev server with HMR"}),M(Y.td,{children:"✅"})]}),O(Y.tr,{children:[M(Y.td,{children:"Tailwind CSS styling"}),M(Y.td,{children:"✅"})]}),O(Y.tr,{children:[M(Y.td,{children:"Code syntax highlighting"}),M(Y.td,{children:"✅"})]})]})]}),O(Y.p,{children:["Code blocks use syntax highlighting by ",M(Y.a,{href:"https://shiki.style/",children:"Shiki"}),":"]}),M(F4,{children:M(Y.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0",children:O(Y.code,{children:[O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#D73A49"},children:"def"}),M(Y.span,{style:{color:"#6F42C1"},children:" greet"}),M(Y.span,{style:{color:"#24292E"},children:"(name: "}),M(Y.span,{style:{color:"#005CC5"},children:"str"}),M(Y.span,{style:{color:"#24292E"},children:") -> "}),M(Y.span,{style:{color:"#005CC5"},children:"str"}),M(Y.span,{style:{color:"#24292E"},children:":"})]}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#D73A49"},children:" return"}),M(Y.span,{style:{color:"#D73A49"},children:" f"}),M(Y.span,{style:{color:"#032F62"},children:'"Hello, '}),M(Y.span,{style:{color:"#005CC5"},children:"{"}),M(Y.span,{style:{color:"#24292E"},children:"name"}),M(Y.span,{style:{color:"#005CC5"},children:"}"}),M(Y.span,{style:{color:"#032F62"},children:'!"'})]}),`
-`,M(Y.span,{className:"line"}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#005CC5"},children:"print"}),M(Y.span,{style:{color:"#24292E"},children:"(greet("}),M(Y.span,{style:{color:"#032F62"},children:'"World"'}),M(Y.span,{style:{color:"#24292E"},children:"))"})]})]})})}),O(Y.p,{children:["You can use React components to ",M(ww,{children:"style text"})," or embed fully working demos in your product specs:"]}),M(Y.div,{className:"not-prose",children:M(Ww,{})}),M(Y.p,{children:"In fact, coding agents have gotten so good that if you can describe it, you can add it to a document:"}),M(Y.div,{className:"not-prose",children:M(qw,{})}),M(Y.h2,{children:"No Boilerplate"}),O(Y.p,{children:["Scratch uses an opinionated project structure and requires ",M(Y.strong,{children:"no boilerplate or configuration"}),": just create a project, run the dev server with ",M(Y.code,{children:"scratch dev"}),", and start writing."]}),O(Y.p,{children:["A simple Scratch project (created with ",M(Y.code,{children:"scratch create"}),") looks like this:"]}),M(eG,{children:M(Y.p,{children:`mysite/
-├── pages/
-│ ├── index.mdx
-│ ├── Counter.tsx
-│ └── examples/
-│ ├── index.md
-│ ├── markdown.md
-│ ├── todolist-spec.mdx
-│ └── TodoList.tsx
-└── public/
-├── logo.png
-└── favicon.svg`})}),O(Y.p,{children:["Use ",M(Y.code,{children:"scratch build"})," to compile this project into a ",M(Y.a,{href:"https://scratch.dev/template",children:"static website"}),"."]}),O(Y.p,{children:["Borrowing heavily from ",M(Y.a,{href:"https://github.com/tailwindlabs/tailwindcss-typography",children:"Tailwind Typography"}),", Scratch uses default styles and Markdown components to render your prose with a clean aesthetic. Code blocks use syntax highlighting by ",M(Y.a,{href:"https://shiki.style/",children:"Shiki"}),"."]}),O(Y.p,{children:["You can change styles and customize the page wrapper component by including the ",M(Y.code,{children:"src/"})," directory when you run ",M(Y.code,{children:"scratch create"}),":"]}),M(eG,{children:M(Y.p,{children:`mysite/
-├── pages/
-├── public/
-└── src/
-├── markdown/
-├── PageWrapper.tsx
-└── tailwind.css`})}),O(Y.p,{children:["Component files and js/ts libraries can live anywhere in ",M(Y.code,{children:"pages/"})," and ",M(Y.code,{children:"src/"}),". They are auto-detected by Scratch and don't need to be explicitly imported in your .mdx files as long as the filename matches the component name."]}),O(Y.p,{children:["Scratch installs build dependencies automatically. You can add additional third-party dependencies by including a ",M(Y.code,{children:"package.json"})," file in your project root."]}),M(Y.h2,{children:"Built on Bun"}),O(Y.p,{children:["Scratch is built on ",M(Y.a,{href:"https://bun.com/",children:"Bun"})," for lightning-fast builds, development with HMR, and native typescript support. It uses the ",M(Y.a,{href:"https://tailwindcss.com/",children:"Tailwind CSS"})," framework to make component styling easy."]}),M(Y.p,{children:"Scratch compiles Javascript (.js), Typescript (.ts), JSX (.jsx), TSX (.tsx), Markdown (.md), and MDX (.mdx)."}),M(Y.h2,{children:"Commands"}),M(F4,{children:M(Y.pre,{className:"shiki github-light",style:{backgroundColor:"#fff",color:"#24292e"},tabIndex:"0",children:O(Y.code,{children:[M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Create a new project"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" create"}),M(Y.span,{style:{color:"#032F62"},children:" my-site"}),M(Y.span,{style:{color:"#6A737D"},children:" # interactive"})]}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" create"}),M(Y.span,{style:{color:"#005CC5"},children:" --minimal"}),M(Y.span,{style:{color:"#6A737D"},children:" # omit src/ and page examples"})]}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" create"}),M(Y.span,{style:{color:"#005CC5"},children:" --full"}),M(Y.span,{style:{color:"#6A737D"},children:" # include src/, examples, and package.json"})]}),`
-`,M(Y.span,{className:"line"}),`
-`,M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Start dev server with hot module reloading"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" dev"})]}),`
-`,M(Y.span,{className:"line"}),`
-`,M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Build for production"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" build"})]}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" build"}),M(Y.span,{style:{color:"#005CC5"},children:" --ssg"}),M(Y.span,{style:{color:"#005CC5"},children:" false"}),M(Y.span,{style:{color:"#6A737D"},children:" # disable static site generation"})]}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" build"}),M(Y.span,{style:{color:"#005CC5"},children:" --development"}),M(Y.span,{style:{color:"#6A737D"},children:" # unminified, with source maps"})]}),`
-`,M(Y.span,{className:"line"}),`
-`,M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Preview production build locally"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" preview"})]}),`
-`,M(Y.span,{className:"line"}),`
-`,M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Remove build artifacts"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" clean"})]}),`
-`,M(Y.span,{className:"line"}),`
-`,M(Y.span,{className:"line",children:M(Y.span,{style:{color:"#6A737D"},children:"# Update scratch to latest version"})}),`
-`,O(Y.span,{className:"line",children:[M(Y.span,{style:{color:"#6F42C1"},children:"scratch"}),M(Y.span,{style:{color:"#032F62"},children:" update"})]})]})})})]})}function Mw(A={}){let{wrapper:Y}={...Q4(),...A.components};return Y?M(Y,{...A,children:M(QU,{...A})}):QU(A)}var AH=m0(p0(),1);function Jw({children:A,className:Y,style:G,...H}){let[X,w]=AH.useState(!1),Z=AH.useRef(null);return O("div",{className:"relative group",children:[M("button",{onClick:async()=>{if(!Z.current)return;let q=Z.current.textContent||"";await navigator.clipboard.writeText(q),w(!0),setTimeout(()=>w(!1),2000)},className:"copy-button","aria-label":"Copy code",children:X?"Copied!":"Copy"}),M("pre",{ref:Z,className:Y,style:G,...H,children:A})]})}var FU=m0(p0(),1);function FR(A){return A.toString().toLowerCase().trim().replace(/\s+/g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-")}function Rw(A){if(typeof A==="string")return A;if(Array.isArray(A))return A.map(Rw).join("");if(FU.default.isValidElement(A)&&A.props?.children)return Rw(A.props.children);return""}function VU({children:A,level:Y}){let G=Rw(A),H=FR(G),X=`h${Y}`;return O(X,{id:H,className:"group relative",children:[M("a",{href:`#${H}`,className:"heading-anchor","aria-label":`Link to ${G}`,children:"#"}),A]})}function Bw(A){return M(VU,{...A,level:2})}function Lw(A){return M(VU,{...A,level:3})}function YH({href:A,children:Y,...G}){let H=A?.startsWith("http://")||A?.startsWith("https://");return M("a",{href:A,...H&&{target:"_blank",rel:"noopener noreferrer"},...G,children:Y})}var IU={pre:Jw,h2:Bw,h3:Lw,a:YH};var OU=fw.default.createElement(Xw,{components:IU},fw.default.createElement(Mw)),KU=document.getElementById("mdx");if(window.__scratch_ssg)console.log("Hydrating mdx component"),GH.hydrateRoot(KU,OU);else console.log("Rendering mdx component"),GH.createRoot(KU).render(OU);
diff --git a/dist/index.html b/dist/index.html
deleted file mode 100644
index 3487831..0000000
--- a/dist/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-
-
-
-
-
-
- Scratch
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
\ No newline at end of file
diff --git a/dist/scratch-logo.svg b/dist/scratch-logo.svg
deleted file mode 100644
index c44fcb1..0000000
--- a/dist/scratch-logo.svg
+++ /dev/null
@@ -1,212 +0,0 @@
-
-
diff --git a/dist/tailwind-510c5f85.css b/dist/tailwind-510c5f85.css
deleted file mode 100644
index df53666..0000000
--- a/dist/tailwind-510c5f85.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-leading:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-orange-500:oklch(70.5% .213 47.604);--color-yellow-400:oklch(85.2% .199 91.936);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.bottom-0{bottom:calc(var(--spacing)*0)}.left-2{left:calc(var(--spacing)*2)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-2{margin-inline:calc(var(--spacing)*2)}.mx-12{margin-inline:calc(var(--spacing)*12)}.mx-auto{margin-inline:auto}.my-6{margin-block:calc(var(--spacing)*6)}.my-12{margin-block:calc(var(--spacing)*12)}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);margin-top:1.2em;margin-bottom:1.2em;font-size:1.25em;line-height:1.6}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);font-weight:500;text-decoration:underline}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-counters);font-weight:400}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.25em;font-weight:600}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em;font-style:italic;font-weight:500}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:0;margin-bottom:.888889em;font-size:2.25em;font-weight:800;line-height:1.11111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:900}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:2em;margin-bottom:1em;font-size:1.5em;font-weight:700;line-height:1.33333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:800}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.6em;margin-bottom:.6em;font-size:1.25em;font-weight:600;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:700}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.5em;margin-bottom:.5em;font-weight:600;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:700}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em;display:block}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;border-radius:.3125rem;padding-inline-start:.375em;font-family:inherit;font-size:.875em;font-weight:500}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-size:.875em;font-weight:600}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before,.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);padding-top:.857143em;padding-inline-end:1.14286em;padding-bottom:.857143em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;padding-inline-start:1.14286em;font-size:.875em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;background-color:#0000;border-width:0;border-radius:0;padding:0}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before,.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){table-layout:auto;width:100%;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.71429}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);vertical-align:bottom;padding-inline-end:.571429em;padding-bottom:.571429em;padding-inline-start:.571429em;font-weight:600}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);margin-top:.857143em;font-size:.875em;line-height:1.42857}.prose{--tw-prose-body:oklch(37.3% .034 259.733);--tw-prose-headings:oklch(21% .034 264.665);--tw-prose-lead:oklch(44.6% .03 256.802);--tw-prose-links:oklch(21% .034 264.665);--tw-prose-bold:oklch(21% .034 264.665);--tw-prose-counters:oklch(55.1% .027 264.364);--tw-prose-bullets:oklch(87.2% .01 258.338);--tw-prose-hr:oklch(92.8% .006 264.531);--tw-prose-quotes:oklch(21% .034 264.665);--tw-prose-quote-borders:oklch(92.8% .006 264.531);--tw-prose-captions:oklch(55.1% .027 264.364);--tw-prose-kbd:oklch(21% .034 264.665);--tw-prose-kbd-shadows:oklab(21% -.00316127 -.0338527/.1);--tw-prose-code:oklch(21% .034 264.665);--tw-prose-pre-code:oklch(92.8% .006 264.531);--tw-prose-pre-bg:oklch(27.8% .033 256.848);--tw-prose-th-borders:oklch(87.2% .01 258.338);--tw-prose-td-borders:oklch(92.8% .006 264.531);--tw-prose-invert-body:oklch(87.2% .01 258.338);--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:oklch(70.7% .022 261.325);--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:oklch(70.7% .022 261.325);--tw-prose-invert-bullets:oklch(44.6% .03 256.802);--tw-prose-invert-hr:oklch(37.3% .034 259.733);--tw-prose-invert-quotes:oklch(96.7% .003 264.542);--tw-prose-invert-quote-borders:oklch(37.3% .034 259.733);--tw-prose-invert-captions:oklch(70.7% .022 261.325);--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:#ffffff1a;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:oklch(87.2% .01 258.338);--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:oklch(44.6% .03 256.802);--tw-prose-invert-td-borders:oklch(37.3% .034 259.733);font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.571429em;padding-inline-end:.571429em;padding-bottom:.571429em;padding-inline-start:.571429em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-16{margin-top:calc(var(--spacing)*16)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.block{display:block}.flex{display:flex}.inline{display:inline}.h-1\/2{height:50%}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-48{height:calc(var(--spacing)*48)}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.bg-black{background-color:var(--color-black)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-gray-700{--tw-gradient-from:var(--color-gray-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-red-600{--tw-gradient-from:var(--color-red-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-gray-800{--tw-gradient-via:var(--color-gray-800);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-orange-500{--tw-gradient-via:var(--color-orange-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-gray-900{--tw-gradient-to:var(--color-gray-900);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-yellow-400{--tw-gradient-to:var(--color-yellow-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-4{padding-top:calc(var(--spacing)*4)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-transparent{color:#0000}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.placeholder-gray-400::placeholder{color:var(--color-gray-400)}.opacity-30{opacity:.3}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media (hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@media (min-width:40rem){.sm\:mx-8{margin-inline:calc(var(--spacing)*8)}}@media (min-width:48rem){.md\:mx-16{margin-inline:calc(var(--spacing)*16)}}}.prose :where(code):not(:where([class~=not-prose],pre *)){background-color:var(--color-gray-100);padding-inline:calc(var(--spacing)*1.5);padding-block:calc(var(--spacing)*.5);--tw-font-weight:var(--font-weight-medium);font-size:.9em;font-weight:var(--font-weight-medium);color:var(--color-gray-900);border-radius:.25rem}.prose :where(code):not(:where([class~=not-prose],pre *)):before,.prose :where(code):not(:where([class~=not-prose],pre *)):after{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)){border-style:var(--tw-border-style);padding:calc(var(--spacing)*0);--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);font-size:inherit;background-color:#0000;border-width:0;border-radius:0}.prose :where(kbd):not(:where([class~=not-prose] *)){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300);background-color:var(--color-gray-100);padding-inline:calc(var(--spacing)*1.5);padding-block:calc(var(--spacing)*.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-gray-900);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-radius:.25rem}.prose :where(ul.contains-task-list):not(:where([class~=not-prose] *)){padding-left:calc(var(--spacing)*0);list-style-type:none}.prose :where(li.task-list-item>input[type=checkbox]):not(:where([class~=not-prose] *)){margin-right:calc(var(--spacing)*2);margin-left:calc(var(--spacing)*1);vertical-align:middle}.prose :where(table):not(:where([class~=not-prose] *)){margin-inline:calc(var(--spacing)*4);width:auto;max-width:100%}pre:has(>code){border-radius:var(--radius-lg);background-color:var(--color-white);overflow-x:auto}pre>code{padding:calc(var(--spacing)*4);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);color:#24292e;display:block}.copy-button{top:calc(var(--spacing)*2);right:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));border-radius:.25rem;position:absolute}@media (hover:hover){.copy-button:is(:where(.group):hover *){opacity:1}}.copy-button{background-color:var(--color-gray-200);color:var(--color-gray-500)}@media (hover:hover){.copy-button:hover{color:var(--color-gray-700)}}.heading-anchor{top:calc(var(--spacing)*0);left:calc(var(--spacing)*-6);opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));-webkit-user-select:none;user-select:none;text-decoration-line:none;position:absolute}@media (hover:hover){.heading-anchor:is(:where(.group):hover *){opacity:1}}.heading-anchor{color:var(--color-gray-400)}@media (hover:hover){.heading-anchor:hover{color:var(--color-gray-600)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
\ No newline at end of file
diff --git a/dist/x-logo.svg b/dist/x-logo.svg
deleted file mode 100644
index 56368dd..0000000
--- a/dist/x-logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..1194b55
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "scratch.dev",
+ "private": true,
+ "scripts": {
+ "dev": "scratch dev",
+ "build": "scratch build"
+ },
+ "dependencies": {
+ "react": "latest",
+ "react-dom": "latest",
+ "@mdx-js/react": "latest",
+ "tailwindcss": "latest",
+ "@tailwindcss/cli": "latest",
+ "@tailwindcss/typography": "latest"
+ }
+}
diff --git a/pages/Files.tsx b/pages/Files.tsx
deleted file mode 100644
index 892dbf4..0000000
--- a/pages/Files.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React from "react";
-
-interface FileNode {
- name: string;
- depth: number;
- isLast: boolean;
- parentIsLast: boolean[];
-}
-
-function parseTree(text: string): FileNode[] {
- const lines = text.trim().split("\n");
- const nodes: FileNode[] = [];
-
- // Stack of { depth, isLast } for each open folder level
- const stack: { depth: number; isLast: boolean }[] = [];
-
- for (const line of lines) {
- if (!line.trim()) continue;
-
- // Find where the actual filename starts
- const nameMatch = line.match(/[^\s│|├└─]/);
- if (!nameMatch) continue;
-
- const nameStart = nameMatch.index!;
- const prefix = line.slice(0, nameStart);
- const name = line.slice(nameStart).trim();
-
- if (!name) continue;
-
- const isLast = prefix.includes("└");
- const hasBranch = prefix.includes("├") || prefix.includes("└");
-
- // Count │ to know how many non-last ancestors
- const pipeCount = (prefix.match(/[│|]/g) || []).length;
-
- let depth: number;
-
- if (!hasBranch && prefix.length === 0) {
- // Root item
- depth = 0;
- stack.length = 0;
- } else {
- // Pop stack until we find the right parent level
- // pipeCount tells us how many ancestors are still "open" (not last)
- while (stack.length > 0) {
- const openCount = stack.filter((s) => !s.isLast).length;
- if (openCount <= pipeCount) break;
- stack.pop();
- }
-
- depth = stack.length + 1;
- }
-
- // Update stack
- if (isLast) {
- // Pop items at this depth or deeper
- while (stack.length >= depth) {
- stack.pop();
- }
- }
-
- // Build parentIsLast array from stack
- const parentIsLast = stack.map((s) => s.isLast);
-
- const isFolder = name.endsWith("/") || !name.includes(".");
-
- nodes.push({
- name,
- depth,
- isLast,
- parentIsLast,
- });
-
- // If this is a folder, push to stack for potential children
- if (isFolder) {
- stack.push({ depth, isLast });
- }
- }
-
- return nodes;
-}
-
-function FileRow({ node }: { node: FileNode }) {
- const isFolder = node.name.endsWith("/") || !node.name.includes(".");
-
- return (
- (null);
const [cornerHits, setCornerHits] = useState(0);
const [position, setPosition] = useState({ x: 20, y: 20 });
- const [velocity, setVelocity] = useState({ x: 2, y: 1.5 });
+ const [speedMultiplier, setSpeedMultiplier] = useState(1);
+ const [velocity, setVelocity] = useState({ x: 2 * 1, y: 1.5 * 1 });
const [color, setColor] = useState("#8b5cf6");
+ const toggleSpeed = () => {
+ const newMultiplier = speedMultiplier === 10 ? 1 : 10;
+ setSpeedMultiplier(newMultiplier);
+ setVelocity((v) => ({
+ x: Math.sign(v.x) * 2 * newMultiplier,
+ y: Math.sign(v.y) * 1.5 * newMultiplier,
+ }));
+ };
+
const logoWidth = 80;
const logoHeight = 40;
@@ -21,13 +31,17 @@ export default function BouncingDvdLogo() {
const getRandomColor = () => {
const newColor = colors[Math.floor(Math.random() * colors.length)];
- return newColor === color ? colors[(colors.indexOf(color) + 1) % colors.length] : newColor;
+ return newColor === color
+ ? colors[(colors.indexOf(color) + 1) % colors.length]
+ : newColor;
};
useEffect(() => {
const container = containerRef.current;
if (!container) return;
+ const cornerTolerance = 10; // pixels of tolerance for corner detection
+
const animate = () => {
setPosition((prev) => {
const containerWidth = container.clientWidth;
@@ -64,8 +78,15 @@ export default function BouncingDvdLogo() {
if (!hitX) setColor(getRandomColor());
}
- // Corner hit!
- if (hitX && hitY) {
+ // Corner hit - check if near both edges (with tolerance)
+ const nearLeftOrRight =
+ newX <= cornerTolerance ||
+ newX >= containerWidth - logoWidth - cornerTolerance;
+ const nearTopOrBottom =
+ newY <= cornerTolerance ||
+ newY >= containerHeight - logoHeight - cornerTolerance;
+
+ if ((hitX || hitY) && nearLeftOrRight && nearTopOrBottom) {
setCornerHits((c) => c + 1);
}
@@ -78,9 +99,12 @@ export default function BouncingDvdLogo() {
}, [velocity]);
return (
-
+ 
+
Scratch compiles Markdown and React into beautiful static websites that can be hosted anywhere.
#Quick Start
# Install scratch
-curl -fsSL https://scratch.dev/install.sh | bash
-
-# Create a new project
-scratch create
-
-# Start the dev server
-scratch dev#What can you do with Scratch?
Scratch was designed for collaborative writing with coding agents like Claude Code. Use your favorite editor to write in Markdown and embed React components when it's easier to express yourself with code.
Scratch supports Github-flavored Markdown features like tables and todolists:
| Feature | Supported? |
|---|---|
Compiles .md .mdx .tsx .ts .jsx .js | ✅ |
| Dev server with HMR | ✅ |
| Tailwind CSS styling | ✅ |
| Code syntax highlighting | ✅ |
Code blocks use syntax highlighting by Shiki:
def greet(name: str) -> str:
- return f"Hello, {name}!"
-
-print(greet("World"))You can use React components to style text or embed fully working demos in your product specs:
No todos yet. Add one above!
0 remaining
In fact, coding agents have gotten so good that if you can describe it, you can add it to a document:
Corner hits: 0
#No Boilerplate
Scratch uses an opinionated project structure and requires no boilerplate or configuration: just create a project, run the dev server with scratch dev, and start writing.
A simple Scratch project (created with scratch create) looks like this:
mysite/
pages/
index.mdx
Counter.tsx
examples/
index.md
markdown.md
todolist-spec.mdx
TodoList.tsx
public/
logo.png
favicon.svg
Use scratch build to compile this project into a static website.
Borrowing heavily from Tailwind Typography, Scratch uses default styles and Markdown components to render your prose with a clean aesthetic. Code blocks use syntax highlighting by Shiki.
You can change styles and customize the page wrapper component by including the src/ directory when you run scratch create:
mysite/
pages/
public/
src/
markdown/
PageWrapper.tsx
tailwind.css
Component files and js/ts libraries can live anywhere in pages/ and src/. They are auto-detected by Scratch and don't need to be explicitly imported in your .mdx files as long as the filename matches the component name.
Scratch installs build dependencies automatically. You can add additional third-party dependencies by including a package.json file in your project root.
#Built on Bun
Scratch is built on Bun for lightning-fast builds, development with HMR, and native typescript support. It uses the Tailwind CSS framework to make component styling easy.
Scratch compiles Javascript (.js), Typescript (.ts), JSX (.jsx), TSX (.tsx), Markdown (.md), and MDX (.mdx).
#Commands
# Create a new project
-scratch create my-site # interactive
-scratch create --minimal # omit src/ and page examples
-scratch create --full # include src/, examples, and package.json
-
-# Start dev server with hot module reloading
-scratch dev
-
-# Build for production
-scratch build
-scratch build --ssg false # disable static site generation
-scratch build --development # unminified, with source maps
-
-# Preview production build locally
-scratch preview
-
-# Remove build artifacts
-scratch clean
-
-# Update scratch to latest version
-scratch update
- {/* Render vertical lines for each parent level */}
- {node.parentIsLast.map((parentLast, i) => (
-
- );
-}
-
-function extractText(children: React.ReactNode): string {
- if (typeof children === "string") return children;
- if (typeof children === "number") return String(children);
- if (!children) return "";
-
- if (Array.isArray(children)) {
- return children.map(extractText).join("\n");
- }
-
- if (typeof children === "object" && "props" in children) {
- const el = children as React.ReactElement;
- // If it's a
- {!parentLast && (
-
- )}
-
- ))}
-
- {/* Render the branch for this node */}
- {node.depth > 0 && (
-
- {/* Vertical line (full height if not last, half if last) */}
-
- {/* Horizontal line */}
-
-
- )}
-
- {/* File/folder name */}
-
- {node.name}
-
- tag or similar, extract and add newline - if (el.type === "p" || el.type === "br") { - return extractText(el.props.children) + "\n"; - } - return extractText(el.props.children); - } - - return ""; -} - -export default function Files({ children }: { children: React.ReactNode }) { - const text = extractText(children); - const nodes = parseTree(text); - - return ( -
- {nodes.map((node, i) => (
-
- );
-}
diff --git a/pages/BouncingDvdLogo.tsx b/pages/components/BouncingDvdLogo.tsx
similarity index 62%
rename from pages/BouncingDvdLogo.tsx
rename to pages/components/BouncingDvdLogo.tsx
index 3f9ebf8..6dcc5b7 100644
--- a/pages/BouncingDvdLogo.tsx
+++ b/pages/components/BouncingDvdLogo.tsx
@@ -4,9 +4,19 @@ export default function BouncingDvdLogo() {
const containerRef = useRef
+ (0);
diff --git a/dist/DVD_logo.svg b/pages/components/DVD_logo.svg
similarity index 100%
rename from dist/DVD_logo.svg
rename to pages/components/DVD_logo.svg
diff --git a/pages/components/DocsSidebar.tsx b/pages/components/DocsSidebar.tsx
new file mode 100644
index 0000000..5f6cc6d
--- /dev/null
+++ b/pages/components/DocsSidebar.tsx
@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+
+interface TocItem {
+ id: string;
+ text: string;
+}
+
+export default function DocsSidebar() {
+ const [headings, setHeadings] = useState([]);
+ const [activeId, setActiveId] = useState("");
+
+ useEffect(() => {
+ // Find all h2 elements on the page
+ const h2Elements = document.querySelectorAll("h2");
+ const items: TocItem[] = [];
+
+ h2Elements.forEach((h2) => {
+ // Generate id from text if not present
+ if (!h2.id) {
+ h2.id = h2.textContent
+ ?.toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/(^-|-$)/g, "") || "";
+ }
+ // Get text content, filtering out the # anchor
+ let text = h2.textContent || "";
+ text = text.replace(/^#\s*/, "").trim();
+ items.push({
+ id: h2.id,
+ text,
+ });
+ });
+
+ setHeadings(items);
+
+ // Scroll to hash after IDs are set
+ if (window.location.hash) {
+ const id = window.location.hash.slice(1);
+ const el = document.getElementById(id);
+ if (el) {
+ setTimeout(() => el.scrollIntoView(), 0);
+ }
+ }
+ }, []);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setActiveId(entry.target.id);
+ }
+ });
+ },
+ { rootMargin: "-80px 0px -80% 0px" }
+ );
+
+ headings.forEach(({ id }) => {
+ const el = document.getElementById(id);
+ if (el) observer.observe(el);
+ });
+
+ return () => observer.disconnect();
+ }, [headings]);
+
+ if (headings.length === 0) return null;
+
+ return (
+
+ );
+}
diff --git a/pages/components/Files.tsx b/pages/components/Files.tsx
new file mode 100644
index 0000000..48ba629
--- /dev/null
+++ b/pages/components/Files.tsx
@@ -0,0 +1,271 @@
+import React, { useState } from "react";
+
+// Tree node structure from parsing
+interface TreeNode {
+ id: string;
+ name: string;
+ comment?: string;
+ children: TreeNode[];
+ startCollapsed: boolean;
+}
+
+// Flattened node for rendering
+interface RenderNode {
+ id: string;
+ name: string;
+ comment?: string;
+ depth: number;
+ isLast: boolean;
+ parentIsLast: boolean[];
+ isFolder: boolean;
+ hasChildren: boolean;
+}
+
+function parseTree(text: string): TreeNode[] {
+ const lines = text.split("\n").filter((line) => line.trim().length > 0);
+ if (lines.length === 0) return [];
+
+ // Parse lines - support both whitespace and dash-prefix for indentation
+ const items = lines.map((line, index) => {
+ const dashMatch = line.match(/^(-+)/);
+ let name: string;
+ let indent: number;
+ let comment: string | undefined;
+
+ if (dashMatch) {
+ name = line.slice(dashMatch[1].length);
+ indent = dashMatch[1].length;
+ } else {
+ name = line.trim();
+ indent = line.length - line.trimStart().length;
+ }
+
+ // Check for # comment
+ const commentMatch = name.match(/\s*#\s*(.*)$/);
+ if (commentMatch) {
+ comment = commentMatch[1].trim();
+ name = name.slice(0, commentMatch.index).trim();
+ }
+
+ // Check for (collapsed) suffix
+ const collapsedMatch = name.match(/\s*\(collapsed\)\s*$/i);
+ const startCollapsed = !!collapsedMatch;
+ if (collapsedMatch) {
+ name = name.slice(0, collapsedMatch.index).trim();
+ }
+
+ return { name, indent, comment, startCollapsed, lineIndex: index };
+ });
+
+ // Normalize indents by subtracting the minimum
+ const baseIndent = Math.min(...items.map((item) => item.indent));
+ items.forEach((item) => (item.indent -= baseIndent));
+
+ // Build tree using a stack
+ const roots: TreeNode[] = [];
+ const stack: { node: TreeNode; indent: number }[] = [];
+
+ for (const { name, indent, comment, startCollapsed, lineIndex } of items) {
+ const node: TreeNode = {
+ id: `node-${lineIndex}`,
+ name,
+ comment,
+ children: [],
+ startCollapsed,
+ };
+
+ // Pop stack until we find the parent (item with smaller indent)
+ while (stack.length > 0 && stack[stack.length - 1].indent >= indent) {
+ stack.pop();
+ }
+
+ if (stack.length === 0) {
+ roots.push(node);
+ } else {
+ stack[stack.length - 1].node.children.push(node);
+ }
+
+ stack.push({ node, indent });
+ }
+
+ return roots;
+}
+
+function flattenTree(
+ roots: TreeNode[],
+ collapsedIds: Set
+): RenderNode[] {
+ const result: RenderNode[] = [];
+
+ function traverse(
+ nodes: TreeNode[],
+ depth: number,
+ parentIsLast: boolean[]
+ ): void {
+ nodes.forEach((node, index) => {
+ const isLast = index === nodes.length - 1;
+ const isFolder = node.name.endsWith("/");
+ const hasChildren = node.children.length > 0;
+
+ result.push({
+ id: node.id,
+ name: node.name,
+ comment: node.comment,
+ depth,
+ isLast,
+ parentIsLast: [...parentIsLast],
+ isFolder,
+ hasChildren,
+ });
+
+ // Only traverse children if not collapsed
+ if (hasChildren && !collapsedIds.has(node.id)) {
+ traverse(node.children, depth + 1, [...parentIsLast, isLast]);
+ }
+ });
+ }
+
+ traverse(roots, 0, []);
+ return result;
+}
+
+function getInitialCollapsed(roots: TreeNode[]): Set {
+ const collapsed = new Set();
+
+ function traverse(nodes: TreeNode[]): void {
+ for (const node of nodes) {
+ if (node.startCollapsed) {
+ collapsed.add(node.id);
+ }
+ traverse(node.children);
+ }
+ }
+
+ traverse(roots);
+ return collapsed;
+}
+
+interface FileRowProps {
+ node: RenderNode;
+ isCollapsed: boolean;
+ onToggle: () => void;
+}
+
+function FileRow({ node, isCollapsed, onToggle }: FileRowProps) {
+ const isClickable = node.isFolder;
+ const isDotfile = node.name.startsWith(".");
+
+ return (
+
{/* TV outer frame */}
-
);
diff --git a/pages/Counter.tsx b/pages/components/Counter.tsx
similarity index 95%
rename from pages/Counter.tsx
rename to pages/components/Counter.tsx
index 03186e1..b55604a 100644
--- a/pages/Counter.tsx
+++ b/pages/components/Counter.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
export default function Counter(): React.ReactElement {
const [count, setCount] = useState
+
-
{/* TV screen bezel */}
{/* Screen container */}
@@ -88,12 +112,20 @@ export default function BouncingDvdLogo() {
ref={containerRef}
className="relative w-full h-48 rounded overflow-hidden"
style={{
- background: "linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 50%, #1a1a2e 100%)",
+ background:
+ "linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 50%, #1a1a2e 100%)",
}}
>
+ {/* Corner hits counter in center */}
+
+
+ {cornerHits}
+
+
+
{/* Bouncing logo */}
- Corner hits: {cornerHits} + {/* Prompt text */} +
+ "Make a component that looks like a TV screen with a bouncing DVD logo. + Count the number of times...
+ {/* Left side: indent + caret + name */}
+
+ );
+}
+
+function extractText(children: React.ReactNode): string {
+ if (typeof children === "string") return children;
+ if (typeof children === "number") return String(children);
+ if (!children) return "";
+
+ if (Array.isArray(children)) {
+ return children.map(extractText).join("\n");
+ }
+
+ if (typeof children === "object" && "props" in children) {
+ const el = children as React.ReactElement;
+ if (el.type === "p" || el.type === "br") {
+ return extractText(el.props.children) + "\n";
+ }
+ return extractText(el.props.children);
+ }
+
+ return "";
+}
+
+interface FilesProps {
+ content?: string;
+ children?: React.ReactNode;
+}
+
+export default function Files({ content, children }: FilesProps) {
+ const text = content ?? extractText(children);
+ const [tree] = useState(() => parseTree(text));
+ const [collapsedIds, setCollapsedIds] = useState(() =>
+ getInitialCollapsed(tree)
+ );
+
+ const nodes = flattenTree(tree, collapsedIds);
+
+ const toggleCollapse = (id: string) => {
+ setCollapsedIds((prev) => {
+ const next = new Set(prev);
+ if (next.has(id)) {
+ next.delete(id);
+ } else {
+ next.add(id);
+ }
+ return next;
+ });
+ };
+
+ return (
+
+ {/* Caret for folders */}
+ {isClickable ? (
+
+ ) : (
+
+ )}
+
+
+ {node.name}
+
+
+
+ {/* Right side: comment */}
+ {node.comment && (
+
+ {node.comment}
+
+ )}
+
+ {nodes.map((node) => (
+ toggleCollapse(node.id)}
+ />
+ ))}
+
+ );
+}
diff --git a/pages/Fire.tsx b/pages/components/Fire.tsx
similarity index 100%
rename from pages/Fire.tsx
rename to pages/components/Fire.tsx
diff --git a/pages/TodoList.tsx b/pages/components/TodoList.tsx
similarity index 74%
rename from pages/TodoList.tsx
rename to pages/components/TodoList.tsx
index a1085ab..d3e9f0f 100644
--- a/pages/TodoList.tsx
+++ b/pages/components/TodoList.tsx
@@ -8,6 +8,13 @@ interface Todo {
const STORAGE_KEY = "scratch-demo-todos";
+const DEFAULT_TODOS: Todo[] = [
+ { id: 1, text: "Create scratch project", completed: false },
+ { id: 2, text: "Edit pages/index.mdx", completed: false },
+ { id: 3, text: "Build with `scratch build`", completed: false },
+ { id: 4, text: "Publish with `scratch publish`", completed: false },
+];
+
let globalTodos: Todo[] | null = null;
let listeners: Set<(todos: Todo[]) => void> = new Set();
@@ -17,7 +24,7 @@ function getTodos(): Todo[] {
globalTodos = [];
} else {
const stored = localStorage.getItem(STORAGE_KEY);
- globalTodos = stored ? JSON.parse(stored) : [];
+ globalTodos = stored ? JSON.parse(stored) : DEFAULT_TODOS;
}
}
return globalTodos;
@@ -72,7 +79,7 @@ function useTodos() {
};
const reset = () => {
- updateTodos([]);
+ updateTodos([...DEFAULT_TODOS]);
};
return { todos, addTodo, toggleTodo, deleteTodo, reset };
@@ -89,30 +96,9 @@ export default function TodoList() {
return (
-
- setInput(e.target.value)}
- onKeyDown={(e) => e.key === "Enter" && handleAdd()}
- placeholder="Add a todo..."
- className="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-900 placeholder-gray-400"
- />
-
-
-
- {todos.length === 0 ? (
- - No todos yet. Add one above! -
- ) : ( --
- {todos.map((todo) => (
+
- ))} -
- + + setInput(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && handleAdd()} + placeholder="Add a todo..." + className="flex-1 bg-transparent border-b border-transparent text-gray-900 placeholder-gray-400 focus:outline-none focus:border-gray-300" + /> + + + +
Todo List Demo
+-
+ {todos.map((todo) => (
+
{todos.filter((t) => !t.completed).length} remaining
diff --git a/pages/docs.mdx b/pages/docs.mdx
new file mode 100644
index 0000000..2247133
--- /dev/null
+++ b/pages/docs.mdx
@@ -0,0 +1,510 @@
+---
+# Basic metadata
+title: "Scratch - Documentation" # Page title (, og:title, twitter:title)
+description: "Complete documentation for the Scratch CLI" # SEO description
+keywords: ["MDX", "static site", "React", "Bun", "markdown"] # SEO keywords
+author: "Pete Koomen" # Page author
+robots: "index, follow" # Search engine directives
+lang: "en" # HTML lang attribute
+canonical: "https://scratch.dev/docs/" # Canonical URL (<link rel="canonical">)
+
+# Open Graph (social sharing)
+image: "https://scratch.dev/scratch-social.png" # Social sharing image (og:image, twitter:image)
+url: "https://scratch.dev/docs/" # Open Graph URL (og:url)
+type: "website" # Content type (og:type) - "website" or "article"
+siteName: "Scratch" # Site name (og:site_name)
+locale: "en_US" # Locale (og:locale)
+siteUrl: "https://scratch.dev" # Base URL for resolving relative image paths
+---
+
+# Documentation
+
+<DocsSidebar />
+
+## Quick Start
+
+Scratch requires no configuration so it's easy to get started:
+
+```bash
+# Install scratch
+curl -fsSL https://scratch.dev/install.sh | bash
+
+# Create a new project
+scratch create
+
+# Start the dev server
+scratch dev
+```
+
+Now you're ready to start writing in `pages/index.mdx`.
+
+## Project Structure
+
+Scratch uses an opinionated project structure and requires **no boilerplate or configuration**: just create a project, run the dev server, and start writing.
+
+A simple Scratch project (created with `scratch create my-scratch-project`) looks like this:
+
+<Files>
+```
+my-scratch-project/
+ pages/ # put markdown pages and components here
+ posts/ (collapsed)
+ post1.md # accessible at /posts/post1
+ post2.md # /posts/post2
+ blog.png # static assets in pages/ or public/
+ index.mdx # accessible at root path (/)
+ Counter.tsx
+ public/ (collapsed) # static assets
+ favicon.svg
+ src/ (collapsed) # global components and css
+ markdown/ (collapsed) # default markdown components
+ index.ts
+ CodeBlock.tsx
+ Heading.tsx
+ Link.tsx
+ template/ (collapsed) # page template components
+ Copyright.jsx
+ Footer.jsx
+ Header.jsx
+ PageWrapper.jsx # wraps every page
+ ScratchBadge.jsx
+ tailwind.css # global styles
+ AGENTS.md # agent context
+ package.json # dependencies
+ .gitignore
+```
+</Files>
+
+Use `scratch build` to compile this project into a static website, like [this one](https://github.com/scratch/scratch.dev).
+
+### pages/
+
+Markdown files live in `pages/` and can be either MDX (`.mdx`) or vanilla Markdown (`.md`).
+
+Scratch compiles each Markdown file into a static web page whose route is determined by your project's directory structure:
+| File | URL |
+|------|-----|
+| `pages/index.mdx` | `/` |
+| `pages/about.mdx` | `/about/` |
+| `pages/posts/index.mdx` | `/posts/` |
+| `pages/posts/hello.mdx` | `/posts/hello/` |
+
+Component files and libraries can live anywhere in `pages/` and `src/`. They are auto-detected by Scratch and don't need to be explicitly imported in your Markdown files as long as the component name (`Counter`) matches the component name (`Counter.jsx` or `Counter.tsx`).
+
+`pages/` can also contain static content like images. These are copied directly into your output directory (`dist/`) and will be served the same way your compiled Markdown is.
+
+### public/
+
+Add static content like a favicon or `_redirects` file to the `public/` directory. These are copied directly into your output directory (`dist/`) just like static content in `pages/`.
+
+### src/
+
+`src/` is for CSS files, components and JS/TS libraries. New Scratch projects will contain the following:
+
+- `src/template/PageWrapper.jsx` - your Markdown contents will be "wrapped" with this component. Modify it to change page headers, footers, nav bars and other global components.
+- `src/template/` - contains page template components like `Header.jsx`, `Footer.jsx`, `Copyright.jsx`, and `ScratchBadge.jsx`.
+- `src/tailwind.css` - global styles. Edit this to change the look and feel of your compiled Markdown.
+- `src/markdown` - a directory containing default Markdown components. For example, edit `src/markdown/CodeBlock.tsx` to change how Markdown code blocks are rendered.
+
+
+### package.json
+
+Scratch automatically installs build dependencies. You can add additional dependencies by editing `package.json`.
+
+## Commands
+
+### scratch create
+
+Create a new Scratch project.
+
+```bash
+scratch create [path]
+```
+
+Options:
+- `--no-src` - Skip the src/ template directory
+- `--no-package` - Skip package.json template
+- `--no-example` - Skip example content files
+
+### scratch dev
+
+Start the development server with live reload.
+
+```bash
+scratch dev [path]
+```
+
+Options:
+- `-p, --port <port>` - Port for dev server (default: 5173)
+- `-n, --no-open` - Don't open browser automatically
+- `-d, --development` - Development mode (unminified, with source maps)
+- `-b, --base <path>` - Base path for deployment (e.g., `/mysite/`)
+- `--static <mode>` - Static file mode:
+ - `public` - ignore static assets in `pages/`
+ - `assets` (default) - serve assets like images, but not javascript or typescript code files like `lib.js`
+ - `all` - serve assets _and_ code files statically
+- `--strict` - Disable auto-injection of PageWrapper and imports
+- `--highlight <mode>` - Syntax highlighting supported languages: `off`, `popular`, `auto` (default), `all`
+
+### scratch build
+
+Build the project for production.
+
+```bash
+scratch build [path]
+```
+
+Options:
+- `-o, --out-dir <path>` - Output directory (default: `dist`)
+- `-d, --development` - Development mode (unminified, with source maps)
+- `-b, --base <path>` - Base path for deployment
+- `--no-ssg` - Disable static site generation
+- `--static <mode>` - Static file mode: `public`, `assets`, `all`
+- `--strict` - Disable auto-injection of PageWrapper and imports
+- `--highlight <mode>` - Syntax highlighting mode
+
+### scratch preview
+
+Preview the production build locally.
+
+```bash
+scratch preview [path]
+```
+
+**Options:**
+- `-p, --port <port>` - Port for preview server (default: 4173)
+- `-n, --no-open` - Don't open browser automatically
+
+### scratch view
+
+Quick preview of a single file or directory. Handy for e.g. reading `README.md` files.
+
+```bash
+scratch view <path>
+```
+
+Options:
+- `-p, --port <port>` - Port for dev server (default: 5173)
+- `-n, --no-open` - Don't open browser automatically
+
+Useful for viewing individual `.md` or `.mdx` files without setting up a full project.
+
+### scratch clean
+
+Remove build artifacts.
+
+```bash
+scratch clean [path]
+```
+
+Removes the `dist/` and `.scratch-build-cache/` directories.
+
+### scratch checkout
+
+Restore template files from built-in templates.
+
+```bash
+scratch checkout [file]
+```
+
+Options:
+- `-l, --list` - List all available template files
+- `-f, --force` - Overwrite existing files without confirmation
+
+### scratch update
+
+Update Scratch to the latest version.
+
+```bash
+scratch update
+```
+
+### Global Options
+
+These options work with all commands:
+
+- `-v, --verbose` - Verbose output for debugging
+- `-q, --quiet` - Quiet mode (errors only)
+- `--show-bun-errors` - Show full Bun error stack traces
+- `--version` - Show CLI version
+
+## Writing Content
+
+### Frontmatter
+
+Add YAML frontmatter at the top of your MDX files to set page metadata. These properties are automatically converted to HTML meta tags for SEO and social sharing.
+
+#### Basic Properties
+
+| Property | Description |
+|----------|-------------|
+| `title` | Page title. Sets `<title>`, `og:title`, and `twitter:title` |
+| `description` | Page description for SEO. Sets meta description, `og:description`, and `twitter:description` |
+| `keywords` | Keywords for SEO. Can be a string or array (arrays are joined with ", ") |
+| `author` | Page author. Sets `meta[name="author"]` |
+| `robots` | Robots directive (e.g., `"index, follow"`) |
+| `lang` | HTML language attribute (e.g., `"en"`) |
+| `canonical` | Canonical URL. Sets `<link rel="canonical">` |
+
+#### Open Graph Properties
+
+| Property | Description | Default |
+|----------|-------------|---------|
+| `image` | Social sharing image URL. Sets `og:image` and `twitter:image` | - |
+| `url` | Canonical Open Graph URL. Sets `og:url` | - |
+| `type` | Content type. Sets `og:type` | `"article"` |
+| `siteName` | Site name. Sets `og:site_name` | - |
+| `locale` | Locale (e.g., `"en_US"`). Sets `og:locale` | - |
+| `siteUrl` | Base URL for resolving relative image paths | - |
+
+#### Twitter Card Properties
+
+| Property | Description | Default |
+|----------|-------------|---------|
+| `twitterCard` | Card type. Sets `twitter:card` | `"summary_large_image"` |
+| `twitterSite` | Site's Twitter handle (e.g., `"@mysite"`). Sets `twitter:site` | - |
+| `twitterCreator` | Author's Twitter handle. Sets `twitter:creator` | - |
+
+#### Article Properties
+
+| Property | Description |
+|----------|-------------|
+| `publishDate` | Publication date (ISO format). Sets `article:published_time` |
+| `modifiedDate` | Last modified date (ISO format). Sets `article:modified_time` |
+| `tags` | Article tags. Can be string or array. Sets `article:tag` |
+
+#### Example
+
+```yaml
+---
+title: "My Page Title"
+description: "A brief description for SEO and social sharing"
+keywords: ["react", "markdown", "static site"]
+author: "Your Name"
+image: "/og-image.png"
+type: "article"
+siteName: "My Site"
+locale: "en_US"
+twitterCard: "summary_large_image"
+twitterSite: "@mysite"
+publishDate: "2025-01-01"
+tags: ["tutorial", "guide"]
+canonical: "https://example.com/my-page"
+lang: "en"
+siteUrl: "https://example.com"
+---
+```
+
+**Note:** Image URLs can be absolute (starting with `http://` or `https://`) or relative paths. Relative paths are resolved against `siteUrl` if provided.
+
+### Using Components
+
+Components in `src/` or `pages/` are automatically available in MDX files:
+
+```mdx
+# My Page
+
+<Counter />
+
+<Button>Click me</Button>
+```
+
+The component filename must match the component name (e.g., `Counter.tsx` exports `Counter`).
+
+### Component Patterns
+
+**Self-closing** (wrapped in `not-prose` div):
+```mdx
+<Chart />
+```
+
+**Inline children:**
+```mdx
+<Button>Click me</Button>
+```
+
+**Block children** (requires blank lines):
+```mdx
+<Callout>
+
+## Warning
+
+This is **markdown** inside a component.
+
+</Callout>
+```
+
+## Styling
+
+### Tailwind CSS
+
+Scratch uses Tailwind CSS. Edit `src/tailwind.css` for global styles:
+
+```css
+@import 'tailwindcss';
+@plugin "@tailwindcss/typography";
+
+/* Custom styles */
+.prose a {
+ @apply text-blue-600 hover:text-blue-800;
+}
+```
+
+### Typography
+
+Markdown content is styled with [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography). Use prose modifiers in `src/template/PageWrapper.jsx`:
+
+```jsx
+<div className="prose prose-lg prose-slate">
+ {children}
+</div>
+```
+
+Element modifiers: `prose-h1:`, `prose-a:`, `prose-p:`, `prose-code:`, `prose-pre:`, etc.
+
+### Excluding from Prose
+
+Use the `not-prose` class to exclude elements from typography styling:
+
+```jsx
+<div className="not-prose">
+ <CustomComponent />
+</div>
+```
+
+## PageWrapper
+
+Create `src/template/PageWrapper.jsx` to wrap all pages with a layout:
+
+```jsx
+export default function PageWrapper({ children }) {
+ return (
+ <div className="max-w-2xl mx-auto p-8">
+ <nav>...</nav>
+ <main className="prose">{children}</main>
+ <footer>...</footer>
+ </div>
+ );
+}
+```
+
+## Custom Markdown Components
+
+Override default markdown rendering by creating components in `src/markdown/`:
+
+```tsx
+// src/markdown/Link.tsx
+export default function Link({ href, children, ...props }) {
+ const isExternal = href?.startsWith('http');
+ return (
+ <a
+ href={href}
+ target={isExternal ? '_blank' : undefined}
+ rel={isExternal ? 'noopener noreferrer' : undefined}
+ {...props}
+ >
+ {children}
+ </a>
+ );
+}
+```
+
+Export from `src/markdown/index.ts`:
+
+```ts
+export { default as a } from './Link';
+export { default as pre } from './CodeBlock';
+export { default as h1, default as h2 } from './Heading';
+```
+
+## Syntax Highlighting
+
+Code blocks are highlighted with [Shiki](https://shiki.style/). Control highlighting with the `--highlight` flag:
+
+- `off` - No syntax highlighting
+- `popular` - Common languages only
+- `auto` - Detect from code blocks (default)
+- `all` - All languages
+
+## Build Pipeline
+
+When you run `scratch build`, Scratch compiles your MDX files into a **fully static website**. There's no server-side code running in production—everything is pre-rendered HTML, CSS, and JavaScript that can be hosted on any static file server.
+
+Scratch supports defaults that make it easy to create beautiful & functional websites with your writing. Here's a description of the Scratch build pipeline:
+
+### Build Steps
+
+#### 1. Dependency Resolution
+
+Scratch auto-installs npm dependencies from your `package.json` using Bun. Dependencies are cached in `.scratch-build-cache/` for faster subsequent builds.
+
+#### 2. Entry Generation
+
+For each `.mdx` or `.md` file in `pages/`, Scratch generates client and server entry files that import your content and wire up React rendering.
+
+#### 3. MDX Compilation
+
+MDX files are compiled through a pipeline of remark and rehype plugins:
+
+**Remark plugins** (process Markdown AST):
+- **remark-gfm** - GitHub Flavored Markdown (tables, strikethrough, task lists)
+- **remark-frontmatter** - Extracts YAML frontmatter for page metadata
+- **remark-auto-import** - Automatically imports components used in MDX without explicit import statements
+- **remark-not-prose** - Wraps self-closing components in `not-prose` divs to prevent Tailwind Typography styles from affecting them
+
+**Rehype plugins** (process HTML AST):
+- **rehype-raw** - Allows raw HTML in Markdown while preserving MDX nodes
+- **rehype-image-paths** - Transforms relative image paths to absolute routes, handles base paths for subdirectory deployments
+- **rehype-shiki** - Syntax highlighting using Shiki with configurable language detection
+- **rehype-footnotes** - Moves footnotes inside PageWrapper for proper styling
+
+#### 4. Tailwind Compilation
+
+Scratch compiles your CSS using Tailwind CSS v4. Only the utilities actually used in your content are included in the final bundle.
+
+#### 5. Server Build
+
+Scratch builds a server bundle to pre-render each page. The "server bundle" doesn't actually run on a server; it's only used during the build process to generate pre-rendered HTML.
+
+#### 6. Client Build
+
+The client JavaScript is bundled with Bun's bundler. Output is minified for production with content-hashed filenames for cache busting.
+
+#### 7. HTML Generation
+
+Each page is rendered to static HTML with:
+- Pre-rendered content from the server build
+- Injected CSS and JS bundle references
+- Meta tags from frontmatter (title, description, og:image, etc.)
+
+#### 8. Static Assets
+
+Files from `public/` are copied to the output directory.
+
+#### 9. Output
+
+The final static site is written to `dist/`, ready for deployment to any static host.
+
+## Deployment
+
+Build your site and deploy the `dist/` folder to any static host:
+
+```bash
+scratch build
+```
+
+For subdirectory deployment, use the `--base` flag:
+
+```bash
+scratch build --base /my-site/
+```
+
+## Generated Files
+
+Add these to `.gitignore`:
+
+```
+dist/
+.scratch-build-cache/
+node_modules/
+```
diff --git a/pages/index.mdx b/pages/index.mdx
index 67e6c5f..ce430e3 100644
--- a/pages/index.mdx
+++ b/pages/index.mdx
@@ -1,24 +1,43 @@
---
-title: "Scratch"
-description: "A CLI for building static MDX websites with Bun"
-keywords: ["MDX", "static site", "React", "Bun", "markdown"]
-author: "Scratch"
-type: "website"
-lang: "en"
+# Basic metadata
+title: "Scratch" # Page title (<title>, og:title, twitter:title)
+description: "Write with Markdown and React" # SEO description
+keywords: ["MDX", "static site", "React", "Bun", "markdown"] # SEO keywords
+author: "Pete Koomen" # Page author
+robots: "index, follow" # Search engine directives
+lang: "en" # HTML lang attribute
+canonical: "https://scratch.dev/" # Canonical URL (<link rel="canonical">)
+
+# Open Graph (social sharing)
+image: "https://scratch.dev/scratch-social.png" # Social sharing image (og:image, twitter:image)
+url: "https://scratch.dev/" # Open Graph URL (og:url)
+type: "website" # Content type (og:type) - "website" or "article"
+siteName: "Scratch" # Site name (og:site_name)
+locale: "en_US" # Locale (og:locale)
+siteUrl: "https://scratch.dev" # Base URL for resolving relative image paths
---
-<div className="not-prose flex flex-col items-center justify-center mb-8">
- <img src="/scratch-logo.svg" alt="Scratch" height="120" />
-</div>
+
+
+Scratch is a tool for writing with [Markdown](https://daringfireball.net/projects/markdown/) and [React](https://react.dev/).
+
+Write in Markdown and embed React components right in your text. Scratch compiles your work into beautiful static websites that can be hosted anywhere.
+
+Scratch was designed for collaborative writing with coding agents like [Claude Code](https://www.claude.com/product/claude-code). Use your favorite editor to write in Markdown and ask a coding agent for help when it's easier to express yourself with code.
-Scratch compiles Markdown and React into beautiful static websites that can be hosted anywhere.
## Quick Start
+Scratch requires no configuration so it's easy to get started. First, install:
+
```bash
# Install scratch
curl -fsSL https://scratch.dev/install.sh | bash
+```
+
+Then create a project and start the dev server:
+```bash
# Create a new project
scratch create
@@ -26,20 +45,24 @@ scratch create
scratch dev
```
+Now you're ready to start writing in `pages/index.mdx`. When you're ready, use the `publish` command to share with specific people, your team, or the world:
+
+```bash
+# Publish with a Scratch Server on Cloudflare
+scratch publish
+```
+
## What can you do with Scratch?
-Scratch was designed for collaborative writing with coding agents like [Claude Code](https://www.claude.com/product/claude-code). Use your favorite editor to write in [Markdown](https://daringfireball.net/projects/markdown/) and embed React components when it's easier to express yourself with code.
+Scratch lets you embed interactive React components into your writing, like this counter:
+
+<Counter />
-Scratch supports Github-flavored Markdown features like tables and todolists:
+You can use components to <Fire>style text</Fire> or embed fully working demos in your product specs:
-| Feature | Supported? |
-|---------|-----------|
-| Compiles `.md` `.mdx` `.tsx` `.ts` `.jsx` `.js` | ✅ |
-| Dev server with HMR | ✅ |
-| Tailwind CSS styling | ✅ |
-| Code syntax highlighting | ✅ |
+<TodoList />
-Code blocks use syntax highlighting by [Shiki](https://shiki.style/):
+Scratch uses [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) to render your prose with a clean aesthetic. It supports [Github-flavored Markdown](https://github.com/remarkjs/remark-gfm) out of the box. Code blocks use syntax highlighting by [Shiki](https://shiki.style/).
```python
def greet(name: str) -> str:
@@ -48,83 +71,23 @@ def greet(name: str) -> str:
print(greet("World"))
```
-You can use React components to <Fire>style text</Fire> or embed fully working demos in your product specs:
-
-<TodoList />
-
-In fact, coding agents have gotten so good that if you can describe it, you can add it to a document:
+Unlike traditional word processors, Scratch makes it easy to express any idea. If you can describe it to a coding agent, you can add it to your document:
<BouncingDvdLogo />
-## No Boilerplate
+Collaborating with AI makes writing more fun. Scratch makes that easy.
-Scratch uses an opinionated project structure and requires **no boilerplate or configuration**: just create a project, run the dev server with `scratch dev`, and start writing.
+## Acknowledgements
-A simple Scratch project (created with `scratch create`) looks like this:
-<Files>
- mysite/
- ├── pages/
- │ ├── index.mdx
- │ ├── Counter.tsx
- │ └── examples/
- │ ├── index.md
- │ ├── markdown.md
- │ ├── todolist-spec.mdx
- │ └── TodoList.tsx
- └── public/
- ├── logo.png
- └── favicon.svg
-</Files>
+[Bun](https://bun.com/) for lightning-fast builds, development with HMR, native typescript support, and a portable executable.
-Use `scratch build` to compile this project into a [static website](https://scratch.dev/template).
+[React](https://react.dev/) and [MDX](https://mdxjs.com/) make it possible to write with Markdown and code. [Tailwind CSS](https://tailwindcss.com/) makes component styling easy.
-Borrowing heavily from [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography), Scratch uses default styles and Markdown components to render your prose with a clean aesthetic. Code blocks use syntax highlighting by [Shiki](https://shiki.style/).
+Content preprocessing relies on [unified](https://unifiedjs.com/), with [remark-gfm](https://github.com/remarkjs/remark-gfm) for GitHub Flavored Markdown and [remark-frontmatter](https://github.com/remarkjs/remark-frontmatter) plus [gray-matter](https://github.com/jonschlinkert/gray-matter) for parsing front matter.
-You can change styles and customize the page wrapper component by including the `src/` directory when you run `scratch create`:
+[Shiki](https://shiki.style/) provides beautiful, accurate syntax highlighting with VS Code's grammar engine.
-<Files>
- mysite/
- ├── pages/
- ├── public/
- └── src/
- ├── markdown/
- ├── PageWrapper.tsx
- └── tailwind.css
-</Files>
+[Commander.js](https://github.com/tj/commander.js) scaffolds the CLI.
-Component files and js/ts libraries can live anywhere in `pages/` and `src/`. They are auto-detected by Scratch and don't need to be explicitly imported in your .mdx files as long as the filename matches the component name.
-
-Scratch installs build dependencies automatically. You can add additional third-party dependencies by including a `package.json` file in your project root.
-
-## Built on Bun
-
-Scratch is built on [Bun](https://bun.com/) for lightning-fast builds, development with HMR, and native typescript support. It uses the [Tailwind CSS](https://tailwindcss.com/) framework to make component styling easy.
-
-Scratch compiles Javascript (.js), Typescript (.ts), JSX (.jsx), TSX (.tsx), Markdown (.md), and MDX (.mdx).
-
-## Commands
-
-```bash
-# Create a new project
-scratch create my-site # interactive
-scratch create --minimal # omit src/ and page examples
-scratch create --full # include src/, examples, and package.json
-
-# Start dev server with hot module reloading
-scratch dev
-
-# Build for production
-scratch build
-scratch build --ssg false # disable static site generation
-scratch build --development # unminified, with source maps
-
-# Preview production build locally
-scratch preview
-
-# Remove build artifacts
-scratch clean
-
-# Update scratch to latest version
-scratch update
-```
+Additional dependencies: [fast-glob](https://github.com/mrmlnc/fast-glob), [acorn](https://github.com/acornjs/acorn), [@mdx-js/esbuild](https://mdxjs.com/packages/esbuild/), [@shikijs/rehype](https://shiki.style/packages/rehype), [@types/mdast](https://github.com/DefinitelyTyped/DefinitelyTyped), [unist-util-visit](https://github.com/syntax-tree/unist-util-visit), [unist-util-is](https://github.com/syntax-tree/unist-util-is).
diff --git a/public/DVD_logo.svg b/public/DVD_logo.svg
deleted file mode 100644
index e85f92a..0000000
--- a/public/DVD_logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg width="100%" height="100%" viewBox="0 0 1058.4 465.84" xmlns="http://www.w3.org/2000/svg"><g><path d="m91.053 0-13.719 57.707 102.28 0.039063h24c65.747 0 105.91 26.44 94.746 73.4-12.147 51.133-69.613 73.4-130.67 73.4h-22.947l29.787-125.45h-102.27l-43.521 183.2h145.05c109.07 0 212.76-57.573 231.01-131.15 3.3467-13.507 2.8806-47.253-5.3594-67.359-0.21299-0.787-0.42594-1.4-1.1855-3-0.293-0.653-0.56012-3.6412 1.1465-4.2812 0.947-0.36 2.7069 1.4944 2.9336 2.041 0.853 2.24 1.5059 3.9062 1.5059 3.9062l92.293 260.6 234.97-265.21 99.535-0.089844h24c65.76 0 106.25 26.44 95.092 73.4-12.147 51.133-69.947 73.4-131 73.4h-22.959l29.799-125.47h-102.27l-43.533 183.21h145.07c109.05 0 213.48-57.4 231-131.15 17.52-73.75-59.107-131.15-168.69-131.15h-216.4s-57.319 67.88-67.959 80.693c-57.12 68.787-67.241 87.226-68.961 91.986 0.24-4.8-1.8138-23.412-26.174-92.959-6.48-18.52-27.359-79.721-27.359-79.721h-389.25zm408.77 324.16c-276.04 0-499.83 31.72-499.83 70.84s223.79 70.84 499.83 70.84c276.04 0 499.83-31.72 499.83-70.84s-223.79-70.84-499.83-70.84zm-18.094 48.627c63.04 0 114.13 10.573 114.13 23.613s-51.095 23.613-114.13 23.613c-63.027 0-114.13-10.573-114.13-23.613s51.106-23.613 114.13-23.613z"/><path d="m963.6 445.05-0.73242 5.1738h13.08l-5.1074 36.32h5.7207l5.1055-36.32h11.68l0.72071-5.1738h-30.467zm41.215 0-13.693 41.494h5.4785l10.215-31.76h0.1328l7.1718 31.76 16.668-31.453h0.1191v31.453h5.4805v-41.494h-5.4805l-14.906 28.107-6.4395-28.107h-4.746z" display="none"/></g></svg>
diff --git a/public/scratch-social.png b/public/scratch-social.png
new file mode 100644
index 0000000..cc4205e
Binary files /dev/null and b/public/scratch-social.png differ
diff --git a/public/scratch.svg b/public/scratch.svg
new file mode 100644
index 0000000..afaa536
--- /dev/null
+++ b/public/scratch.svg
@@ -0,0 +1,213 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2144 1984">
+ <defs>
+ <style>
+ .cls-1 {
+ fill: #f9f1b3;
+ }
+
+ .cls-2 {
+ fill: #f0c193;
+ }
+
+ .cls-3 {
+ fill: #2f1a21;
+ }
+
+ .cls-4 {
+ fill: #c78761;
+ }
+
+ .cls-5 {
+ fill: #f4a139;
+ }
+
+ .cls-6 {
+ fill: #a1b5b4;
+ }
+
+ .cls-7 {
+ fill: #e58378;
+ }
+
+ .cls-8 {
+ fill: #2d181d;
+ }
+
+ .cls-9 {
+ fill: #dd7830;
+ }
+
+ .cls-10 {
+ stroke-width: 18px;
+ }
+
+ .cls-10, .cls-11 {
+ fill: none;
+ stroke: #2f1a21;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ }
+
+ .cls-12 {
+ fill: #eda245;
+ }
+
+ .cls-13 {
+ fill: #e7f1f0;
+ }
+
+ .cls-11 {
+ stroke-width: 36px;
+ }
+
+ .cls-14 {
+ fill: #fff;
+ }
+
+ .cls-15 {
+ fill: #f2a684;
+ }
+
+ .cls-16 {
+ fill: #f9e9ab;
+ }
+
+ .cls-17 {
+ fill: #6b7e82;
+ }
+
+ .cls-18 {
+ fill: #f7e9aa;
+ }
+
+ .cls-19 {
+ fill: #ce4330;
+ }
+
+ .cls-20 {
+ fill: #f3bbae;
+ }
+
+ .cls-21 {
+ fill: #cf5f5d;
+ }
+
+ .cls-22 {
+ fill: #f8eaad;
+ }
+
+ .cls-23 {
+ fill: #9e262f;
+ }
+
+ .cls-24 {
+ fill: #a42b30;
+ opacity: .7;
+ }
+
+ .cls-25 {
+ fill: #fae5ba;
+ }
+
+ .cls-26 {
+ fill: #f5d157;
+ }
+
+ .cls-27 {
+ fill: #f6cf58;
+ }
+
+ .cls-28 {
+ fill: #8c8c8c;
+ }
+
+ .cls-29 {
+ fill: #e27b50;
+ }
+
+ .cls-30 {
+ fill: #f2902d;
+ }
+
+ .cls-31 {
+ fill: #eca646;
+ }
+ </style>
+ </defs>
+ <g id="feet">
+ <g>
+ <polygon class="cls-9" points="790.97 1728.68 713.65 1758.1 659.02 1786.67 667.42 1823.65 724.58 1827.02 727.1 1870.72 771.64 1857.27 819.55 1818.61 862.41 1766.5 863.25 1735.41 790.97 1728.68"/>
+ <path class="cls-3" d="M744.01,1887.47c-7.3,2.92-13.41,4.81-20.54,3.36-12.26-2.49-20.17-13.36-23.25-17.6-3.97-5.46-5.42-9.77-5.74-10.79-2.22-6.89-1.76-12.94-1.23-16.35-1.35.57-3.31,1.29-5.75,1.79-5.19,1.06-9.35.48-11.65.13-23.36-3.5-33.9-14.57-33.9-14.57-11.25-11.82-12.24-26.51-12.38-29.79-.56-13.35,5.07-26.55,15.08-37.15,7.25-7.68,16.43-13.28,26.44-16.66,35.23-11.93,70.81-23.57,106.73-34.9,2.67-.84,5.33-1.68,8-2.52l102.24,14.37c8.07,1.13,14.37,7.79,14.85,16.16.38,6.58-3.21,12.76-8.9,16.09l-24.19,14.13-10.64,33.04c-1.02,1.71-2.72,4.45-5.03,7.67-15.66,21.92-29.93,25.28-67.4,50.06-9.69,6.41-23.12,15.69-42.74,23.53ZM737.29,1796.7c7.87-2.85,11.03-4.64,12.51-3.18,2.92,2.89-5.76,13.45-13.26,35.3-2.92,8.5-7.34,21.69-2.99,24.8,1.04.74,2.59.91,5.6,0,11.76-3.55,18.65-15.29,19.42-16.58,5.46-9.1,21.63-23.38,69.16-45.96l11.2-34.79c.16-.48.33-.96.53-1.42-17.89-.05-35.78-.1-53.67-.14-5.65.14-11.3.28-16.95.42-30.07,11.02-60.14,22.04-90.21,33.06-1.75.83-4.83,2.6-7.28,6.02-1.56,2.17-4.92,6.87-2.94,11.07,2.07,4.38,8.35,4.75,8.68,4.76,12.28-1.48,22.02-3.49,28.58-5.04,16.6-3.92,24.89-5.88,31.61-8.31Z"/>
+ </g>
+ <g>
+ <polygon class="cls-9" points="1278.16 1773.51 1230.54 1807.13 1228.29 1855.87 1273.68 1864.28 1292.73 1841.87 1328.03 1881.65 1372.85 1889.49 1387.42 1849.15 1421.04 1853.07 1451.86 1834.02 1436.73 1803.2 1372.29 1772.39 1324.67 1752.22 1278.16 1773.51"/>
+ <path class="cls-3" d="M1370.52,1914.52c-2.19.75-12.01,3.93-24.51,1.67-15.21-2.75-24.76-11.8-34.32-20.86-6.33-6-15.25-15.81-22.97-30.26-5.36,3.5-12.3,7.59-20.73,11.48-5.35,2.47-8.92,4.1-13.73,5.33-3.11.8-13.76,3.51-24.65.7-15.84-4.09-28.37-18.9-31.8-35.16-.12-.56-.22-1.11-.32-1.66-2.05-11.91,1.1-24.13,8.17-33.94,5.28-7.32,10.55-14.65,15.83-21.97,5.81-4.86,12.19-9.85,19.17-14.84,8.46-6.04,16.66-11.28,24.4-15.8l14.76-7.08,16.43-6.37c5.54-.84,13.44-1.92,22.97-2.8,12.46-1.15,18.68-1.73,24.46-1.47,14.94.68,20.02,7.23,44.96,16.89,29.91,11.58,26.23,8.8,35.12,13.12,18.81,9.15,34.41,16.74,43,33.76,3.36,6.65,10.8,24.94,2.24,43.56-8.17,17.78-25.38,23.82-29.56,25.21-18.55,6.18-34.32-.28-38.1-1.96.02,4.36-.56,13.37-6.02,22.69-8.1,13.81-21.18,18.51-24.79,19.75ZM1292.61,1820.82c2.25-1.05,4.89-1.01,7.08.17.48.26.98.55,1.49.88,5.43,3.46,8.1,8.22,9.08,9.93,9.56,16.62,24.41,31.66,28.83,36.12,2.45,2.48,6.5,6.39,12.8,7.79,2.68.59,7.81,1.94,10.66-.62,3.43-3.07,1.72-10.04-.95-20.42-1.71-6.66-3.63-11.93-6.49-19.73-4.33-11.82-7.73-19.66-5.31-21.4.16-.12.31-.17.6-.27,4.56-1.52,10.44,2.32,11.02,2.69,3.74,2.43,14.13,6.95,34.91,16,1.47.64,21.07,9.01,32.17,5.49,2.65-.84,3.95-2.09,4.63-3.25,2.31-3.92-.72-9.53-1.69-11.32-4.69-8.68-14.15-12.68-22.83-15.97-4.46-1.69-34.84-13.23-56.68-23.77-9-4.34-10.72-5.7-17.84-8.47-13.55-5.27-25.51-7.42-33.78-8.41-.21-.03-.4.11-.46.32l-4.49,16.26c-.03.12-.12.23-.24.28l-7.2,3.26c-5.86,2.57-14.21,6.81-23.12,13.6-15.5,11.79-33.66,32.01-29.06,40.14,1.16,2.05,3.52,2.94,4.76,3.36,7.02,2.39,14.51-2.48,17.93-4.62,8.08-5.07,18.85-10.9,34.16-18.06Z"/>
+ </g>
+ </g>
+ <g id="Layer_2" data-name="Layer 2">
+ <g>
+ <path class="cls-26" d="M894.09,399.41c-22.8,8.46-86.42,33.87-153.52,88.53-45.08,36.72-73.41,71.71-83.49,84.61-48.02,61.47-69.77,118.22-80.5,146.89-19.65,52.5-27.8,97.42-33.25,128.22-5.88,33.27-6.33,47.39-9.53,70.04-11.14,79.04-35.9,121.52-53.79,172.58-42.22,120.49-26.46,232.5-21.39,265.96,5.89,38.82,19.82,124.5,76.86,199.66,22.73,29.95,50.4,55.72,55.28,60.23,5.28,4.88,42.5,38.94,93.2,68.08,81.79,47.02,166.18,62.31,230.85,73.96,131.57,23.71,233.59,17.24,255.5,15.69,89.76-6.35,180.31-12.75,282.4-65,47.67-24.39,149.33-76.44,212.92-192.75,62.42-114.17,52.9-225.79,47.55-288.56-7.7-90.27-26.87-83.19-72.21-262.79-43.75-173.3-32.45-205.44-78.44-298.09-47.88-96.44-105.1-150.91-118.79-163.61-75.26-69.81-149.84-98.68-168.09-105.34-54.39-19.85-98.46-24.5-128.31-27.46-43.3-4.28-140.25-12.79-253.26,29.14Z"/>
+ <path class="cls-12" d="M819.98,1530.88s-8.4,58.83-8.4,58.83c.13-.86-96.63-43.23-105.9-48.37-35.83-19.86-68.79-44.01-100.61-69.72-36.53-29.51-69.94-65.06-89.35-108.34-5.12-11.42-9.21-23.31-12.06-35.5-1.75-7.51-8.82-30.38-4.74-37.28l-21.85,36.98,5.04,114.3,92.45,159.69,87.41,67.24,87.41,42.02,40.34,23.53,21.85-62.19,13.45-67.24,30.26-36.98,33.62-42.02,10.09-28.58-58.83-10.09-20.17,43.7Z"/>
+ <path class="cls-12" d="M1005.26,1768.41c3.94.27,7.89.54,11.83.82-1.15,1.41-2.29,2.81-3.43,4.22l-8.4-5.04Z"/>
+ <path class="cls-12" d="M1709.01,1219.02c-9.9-40.43-19.8-80.87-29.7-121.31-16.44-36.04-32.87-72.09-49.31-108.14-12.7,18.68-25.4,37.36-38.1,56.04l-97.49,131.11,16.81,10.08h48.07c7.8,0,15.03-4.13,18.98-10.86,1.78-3.04,3.12-5.31,6.34-5.67,13.92-1.53,33.35,36.03,37.82,71.44,3.93,31.18-4.24,56.63-9.58,69.63-17.36,42.28-50.15,63.57-60.18,69.89-54.62,34.4-113.16,23.53-133.92,19.68-32.59-6.05-57.27-18.51-72.28-27.52l3.37-35.3c-32.07-28.19-64.13-56.38-96.19-84.56,1.81,11.38,3.61,22.75,5.42,34.13l-21.86,1.68c-2.04,12.46-7.17,53.63,17.44,93.92,13.42,21.96,30.48,35.17,41.4,42.24-93,114.57-185.99,229.15-278.97,343.73,25.85,1.77,51.69,3.55,77.54,5.34,59.39-4.2,118.78-8.41,178.17-12.61,58-16.25,115.99-32.5,173.98-48.74,35.58-21.58,71.16-43.15,106.74-64.72,31.84-32.87,63.69-65.74,95.53-98.61,0,0,32.44-87.28,47.07-147.93,9.97-41.34,19.46-102.69,12.89-182.94ZM1341.24,1585.66c-37.39,16.54-71.64,25.09-98.61,29.7,13.33-19.21,27.15-38.64,41.46-58.27,11.42-15.66,22.82-30.97,34.18-45.95,10.63,6.4,23.15,13.01,37.54,19.05,20.11,8.44,38.7,13.59,54.35,16.81-18.3,12.68-41.27,26.44-68.92,38.66Z"/>
+ <path class="cls-22" d="M1253.66,1253.53c-1.01-12.4-2.33-42.79,12.42-50.01,5.39-2.64,11.02-1.25,13.07-.75,40.18,9.83,81.15,16.21,121.31,26.1,34.11,8.4,82.45,18.17,125.51-3.36,35.86-17.93,32.78-29.84,32.78-29.84,0,0-113,4.11-124.58-1.12-11.58-5.23-97.87-32.12-97.87-32.12l-60.51-15.32s-55.28,35.86-51.55,56.03,29.42,50.38,29.42,50.38Z"/>
+ <path class="cls-16" d="M556.07,1595.88c6.01-2.54-51.93-113.06-57.63-261.15-.59-15.41-1.97-66.37,7.8-130.95,4.47-29.56,9.96-64.46,26.29-107.13,7.79-20.34,8.91-18.61,18.49-42.86,5.72-14.48,19.16-50.15,31.1-105.06,11-50.58,6.82-53.55,15.97-100.86,5.54-28.67,14.23-72.46,34.46-121.87,27.24-66.52,62.78-112.38,79.84-132.79,8.6-10.29,49.99-58.95,122.71-105.9,104.02-67.15,209.84-90.56,281.56-99.17-50.05-2.99-100.11-5.98-150.16-8.96l-184.9,88.53-97.49,91.89s-107.58,128.87-122.15,208.44c-14.57,79.56-43.7,190.51-50.43,220.76-6.72,30.26-59.39,186.02-59.39,223s8.96,161.37,8.96,161.37c9.34,31.75,18.68,63.5,28.02,95.25,50.28,106.31,64.21,128.63,66.96,127.47Z"/>
+ <path class="cls-3" d="M1110.57,1798.29c-49.59,0-119.65-3.56-199.74-17.99-64.43-11.61-152.67-27.51-238.07-76.6-50.04-28.77-87.1-61.67-97.26-71.06-7.86-7.27-35.29-33.31-57.93-63.15-61.67-81.25-75.84-174.71-81.18-209.89-18.62-122.77,1.9-218.27,22.4-276.77,4.95-14.13,10.45-27.74,15.78-40.9,14.35-35.48,29.19-72.17,36.97-127.38,1.08-7.68,1.84-14.33,2.63-21.38,1.52-13.38,3.08-27.21,7.01-49.44,5.07-28.68,13.56-76.68,34.33-132.19,9.79-26.16,32.71-87.41,83.84-152.86,24.36-31.18,54.44-61.68,87.01-88.2,61.22-49.87,120.75-77.65,159.91-92.18,120.18-44.59,224.16-34.3,263.3-30.43,28.29,2.8,75.64,7.48,133.81,28.71,28.31,10.33,102.11,41.73,175.68,109.98,27.13,25.17,79.27,80.73,123.64,170.1,29.85,60.13,36.74,96.29,48.16,156.19,6.88,36.11,15.45,81.06,31.94,146.4,20.95,82.98,36.19,125.48,47.33,156.51,13.18,36.74,21.14,58.92,25.48,109.87,5.4,63.31,15.45,181.15-50.23,301.26-28.86,52.79-68.68,99.15-118.36,137.81-41.02,31.92-80.48,52.11-104.05,64.18-106.17,54.33-200.16,60.98-291.06,67.41-13.17.93-34.19,2-61.34,2ZM901.91,420.5h0c-50.85,18.86-103.1,49.01-147.14,84.88-37.9,30.87-64.4,61.09-79.96,81.01-46.87,60-67.33,114.66-77.16,140.93-19.32,51.64-27.05,95.33-32.16,124.25-3.69,20.85-5.17,33.98-6.61,46.67-.8,7.03-1.62,14.31-2.79,22.59-8.55,60.68-25.16,101.74-39.81,137.97-5.36,13.26-10.43,25.78-15.02,38.91-18.81,53.68-37.61,141.52-20.37,255.15,5.32,35.1,17.79,117.3,72.53,189.43,20.43,26.92,45.45,50.67,52.63,57.31,6.62,6.12,41.99,37.99,89.14,65.09,78.63,45.2,159.03,59.69,223.62,71.32,118.93,21.43,214.4,17.9,249.92,15.39,90.37-6.39,175.74-12.43,273.73-62.58,46.46-23.78,143.14-73.25,203.43-183.51,59.17-108.22,50.22-213.16,44.88-275.85-3.85-45.1-10.25-62.95-23-98.5-11.44-31.9-27.12-75.58-48.6-160.69-16.82-66.63-25.52-112.29-32.52-148.99-11.06-58.03-17.15-89.99-44.26-144.6-42.72-86.05-93.91-138.54-113.93-157.12-67.57-62.68-134.75-91.3-160.5-100.7-52.83-19.28-96.64-23.61-122.81-26.2-36.31-3.59-132.78-13.13-243.22,27.84Z"/>
+ </g>
+ <path class="cls-26" d="M1198.92,423.16l-21.85-39.5-53.79-53.79-29.42-35.3-69.76-25.21-27.74,12.61-2.52,35.3,15.97,21.85-45.39-5.88-26.05,1.68-32.78,17.65-2.52,23.53,21.85,14.29,11.77,5.04s-11.77,20.17-12.61,23.53-5.04,23.53-5.04,23.53l6.72,28.58,31.1,3.36,38.66-.84,46.23-12.61,50.43-10.93,50.43,2.52h38.66l21.01-11.77-3.36-17.65Z"/>
+ <path class="cls-18" d="M993.63,463.9c-27.87-1.76-36.21-8.91-38.66-15.13-6.01-15.24,19.11-35.64,10.65-49.31-4.09-6.61-16.81-12.89-16.81-12.89h0s11.77-10.65,21.29-8.4c9.53,2.24,22.41-.56,16.25-10.09-6.16-9.53-19.61-10.65-21.85-18.49s2.8-12.89,7.28-14.57,39.22,3.36,44.26,2.24c5.04-1.12-6.72-20.17-6.72-20.17,0,0,.56-11.77,25.77-8.96,25.21,2.8,57.71,6.16,96.93,43.14,39.22,36.98,53.79,25.77,53.79,25.77l-25.21-33.06-59.39-45.95-57.15-26.33-43.14,6.16-1.12,26.89-8.96,17.93-20.17,7.84-35.86,6.72-25.77,11.21-8.96,18.49,6.72,13.45,12.89,11.77,4.48,6.16-1.12,13.45-1.12,21.85,2.24,19.05,6.72,10.65,11.77,6.16c17-1.87,33.99-3.74,50.99-5.6Z"/>
+ <path class="cls-3" d="M1171.1,384.53s-11.87-17.82-44.79-49.32c-12.22-11.69-26.14-20.98-40.9-29.14-13.39-7.4-28.14-13.33-43.29-16.52-7.72-1.63-26.43-8.76-32.22-.51-3.89,5.54,3.03,14.11,5.66,18.75,1.76,3.1,3.39,5.98,5.79,9.06,1.03,1.32,2.95,3.64,10.74,10.18,5.41,4.54,13.68,8.97,16.13,16.03,3.62,10.45-13.45,9.55-19.02,9.32-11.27-.47-13.41-2.15-27.27-3.74-9.66-1.1-17.22-1.27-21.29-1.29-8.17-.04-14.28.46-16.07.62-7.97.69-14.92,1.87-20.63,3.1-10.91,3.95-25.55,10.21-24.91,15.95.24,2.1,2.44,3.46,4.46,4.59,5.69,3.19,16.92,8.54,35.86,12.33.47.05,10.05,1.19,12.75,8.31.2.54,1.17,3.23.32,6.75-1.4,5.77-6.17,7.43-14,13.7,0,0-8.58,6.88-16.44,17.93-3.48,4.9-4.94,8-5.04,11.77-.04,1.52.05,6.31,3.36,10.27,3.07,3.67,7.18,4.57,13.01,5.86,2.05.45,5.76,1.14,13.13,1.24,2.47.04,9.36.06,19.05-1.12,6.06-.74,12.43-1.55,20.54-3.92,4.9-1.44,9-3.03,12.13-4.38,1.26-.55,2.71-.53,3.93.11.88.47,1.29,1.01,1.5,1.46,3.09,6.76-21.79,29.91-50.43,35.67-8.28,1.67-15.29,1.56-18.86,1.49-11-.22-21.35-.42-31.71-6.81-2.65-1.63-12.66-7.99-17.59-20.65-4.61-11.81-2.2-22.45-.56-29.7.89-3.93,2.47-10.64,7.1-18.12,9.57-15.46,25.55-23.5,33.11-23.39.64,0,3.56.11,7.7,0,3.33-.09,6.05-.27,7.84-.42,1.96,4.67,3.92,9.34,5.88,14.01-2.53,2.45-6.71,5.92-12.61,8.4-16.7,7.03-33.26.29-40.7-2.73-6.06-2.47-15.11-6.27-22.98-15.52-3.41-4-11.76-13.81-11.49-27.6.22-11.24,6.04-19.19,9.71-24.05,12.45-16.52,30.75-21.71,42.59-25.07,14.52-4.12,25.9-4.32,41.28-4.48,19.3-.2,35.48,1.71,47.25,3.69-9.28,15.25-20.52,23.77-28.6,21.43-4.29-1.24-6.77-5.73-11.55-14.66-6.93-12.93-11.96-22.34-10.79-34.67,1.37-14.44,10.42-24.11,11.8-25.55,21.44-22.29,62.72-12.58,77.08-9.2,17.93,4.22,30.94,11.17,43.12,17.68,4.94,2.64,20.84,11.37,40.59,27.41,15.65,12.71,37.76,33.32,59.42,64.17.93,3.43,4.17,16.92-3.47,27.44-1.58,2.17-4.79,6.6-9.48,6.96-7.24.55-13.33-8.97-16.12-13.16Z"/>
+ </g>
+ <g id="eyes">
+ <ellipse class="cls-3" cx="775.15" cy="826.48" rx="58.43" ry="76.82"/>
+ <ellipse class="cls-14" cx="785.61" cy="798.5" rx="20.69" ry="18.47" transform="translate(-162.45 1395.15) rotate(-77.65)"/>
+ <ellipse class="cls-3" cx="1218.25" cy="836.41" rx="58.43" ry="76.82"/>
+ <ellipse class="cls-14" cx="1220.37" cy="808.46" rx="18.08" ry="15.75" transform="translate(380.49 2007.42) rotate(-88.51)"/>
+ </g>
+ <g id="Layer_4" data-name="Layer 4">
+ <path class="cls-31" d="M1095.5,939.02c-1.48.78-3.26,10.67-3.97,12.68-1.58,4.52-3.32,8.98-5.24,13.36-11.6,26.61-29.72,49.86-52.44,67.9-5.76,4.58-11.83,8.77-18.23,12.42-17.69,10.08-38.47,11.16-57.62,4.25-.19-.07-.38-.14-.56-.21-11.98-4.44-21.68-12.67-30.77-21.44-9.56-9.23-19.82-21.04-21.32-34.8-2.24-20.54,22.41,3.36,22.41,3.36l60.14,20.92,44.08-13.45,20.17-30.26,22.79-23.91s20.54-10.83,20.54-10.83Z"/>
+ <polygon class="cls-30" points="993.52 855.72 1033.87 884.48 1065.24 909.88 1080.56 934.91 1052.54 980.11 1007.35 1009.62 969.99 1019.7 925.17 996.17 903.13 972.64 908.73 919.22 928.9 891.21 958.79 865.8 993.52 855.72"/>
+ <path class="cls-5" d="M1008.84,873.65c-7.09-2.99-16.84-5.63-25.03-1.49-5.83,2.95-6.2,6.96-13.82,16.06-10.07,12.01-15.04,11.69-23.91,21.67-4.57,5.14-10.32,13.18-14.57,25.4l-2.61,7.84-13.82,7.1-28.39-12.7,14.57-14.57,22.41-16.81,24.28-22.41,15.32-16.06,14.57-7.47,24.65,1.49,9.71,4.48-3.36,7.47Z"/>
+ <path class="cls-1" d="M980.08,861.32s-26.15,27.64-36.98,38.47c-10.83,10.83-25.77,32.87-39.97,33.99s-31.38-4.48-31.38-4.48l31-38.1,73.96-39.97,3.36,10.09Z"/>
+ <path class="cls-3" d="M950.09,974.43c-14.82-1.02-30.19-3.53-60.9-9.08-6.18-1.12-22.09-4.18-34.02-15.92-3.44-3.38-4.84-5.8-5.57-8.26-1.42-4.79-.87-11.7,12.54-29.28,13.18-17.27,26.09-28.49,34.86-35.64,6.68-5.45,15.83-12.92,29.57-20.83,23.07-13.27,36.62-14.6,41.07-15.04,5.26-.52,10.61-.51,15.49.02,11.09,1.21,19.58,4.79,27.1,8.49,11.87,5.83,28.13,13.81,45.64,29.72,5.13,4.66,7.6,7.5,9.77,10.01,2.13,2.46,4.15,4.78,9.53,9.64l1.25,1.12c6.57,6.06,11.18,11.8,14.24,16.06,5.68,7.91,8.53,11.98,8.47,17.79-.08,8.34-5.96,14.09-6.78,14.87-4.28,4.07-9.51,6.72-20.35,7.28-26.22,1.36-23.98,10.76-64.19,16.81-14.19,2.14-33.85,3.88-57.71,2.24ZM887.34,931.57c3.82,1.8,9.6,4.38,16.81,7,35.82,13.05,66.08,12.43,75.08,12.05,16.29-.69,28.51-3.35,38.66-5.61,18.48-4.11,33.65-9.59,44.82-14.29-3.27-5.14-8.3-12.17-15.52-19.53-4.16-4.24-7.46-6.93-13.9-12.13-18.01-14.57-29.31-20.99-35.76-24.33-4.41-2.28-9.98-4.88-17.54-5.71-2.89-.32-6.28-.31-9.54,0-7.85.77-17.78,4.59-29.52,11.34-3.18,1.83-6.07,3.63-8.71,5.38-4.29,2.84-9.38,6.47-17.01,12.79-14.43,11.97-21.73,18.15-25.92,27.69-.96,2.2-1.59,4.08-1.96,5.32ZM969.05,854.71h0,0Z"/>
+ <path class="cls-3" d="M978,1033.7c-2.24-.07-10.94-.44-21.69-4.15-14.62-5.04-27.54-14.36-48.47-30.26,0,0-10.58-8.03-52.67-49.87-1.6-1.59-5.25-5.32-5.04-10.09.12-2.68,1.41-4.76,2.24-5.88,14.35,4.75,28.69,9.49,43.04,14.24,14.93,12.4,26.43,22.43,33.99,29.14,3.26,2.89,15.27,13.57,32.16,22.9,4.88,2.7,10.81,5.64,18.44,5.36,3.91-.14,7.94-1.11,16.2-5.35,10.95-5.63,18.36-11.34,26.61-17.8,11.52-9.01,18.99-16.34,22.65-20.05.65-.66,3.02-3.08,6.09-6.45,5.93-6.5,13.93-15.95,22.75-28.59,8.21,1.24,16.42,2.48,24.63,3.72.27,1.64.56,4.12.46,7.13-.21,6.15-2.11,19.82-34.11,48.93-4.39,3.99-13.94,12.48-27.08,22.23-24.22,17.95-35.38,21.43-41.82,22.93-8.91,2.06-15.96,1.98-18.37,1.9Z"/>
+ </g>
+ <g id="Layer_8" data-name="Layer 8">
+ <g id="pencil">
+ <path class="cls-28" d="M782.47,1799.94l-14.57,103.66,48.75-13.45,56.03-34.18-19.05-34.74s-29.7-18.49-35.86-18.49-35.3-2.8-35.3-2.8Z"/>
+ <path class="cls-8" d="M776.26,1900c16.62-26.52,33.25-53.04,49.87-79.56,0,0-15.13-11.77-22.41-4.48-7.28,7.28-17.37,6.72-17.37,6.72l8.96-17.93s49.87-16.81,66.68,33.06c-1.69,5.53-3.83,10.36-6.16,14.57-20.41,36.87-66.14,45.56-79.56,47.63Z"/>
+ <polygon class="cls-23" points="1692.65 737.91 1758.77 824.2 1049.42 1747.59 993.38 1698.29 978.82 1691.56 1692.65 737.91"/>
+ <polygon class="cls-19" points="1691.53 762.57 975.45 1707.25 964.25 1656.82 911.58 1641.13 1047.17 1437.18 1625.41 689.73 1691.53 762.57"/>
+ <polygon class="cls-4" points="977.04 1698.38 847.61 1813.8 864.98 1840.7 909.24 1835.65 1010.66 1779.06 1032.51 1743.2 1025.23 1720.23 998.89 1709.59 977.04 1698.38"/>
+ <polygon class="cls-2" points="888.51 1613.77 818.47 1795.31 851.53 1817.73 973.68 1702.86 956.31 1656.36 926.05 1649.07 911.49 1649.07 899.72 1632.26 888.51 1613.77"/>
+ <path class="cls-25" d="M890.19,1632.26c-1.68.56-67.24,164.73-67.24,164.73l-26.89.56,22.41-146.24,20.73-39.78,29.7-6.72,21.29,27.46Z"/>
+ <polygon class="cls-29" points="918.3 1643.38 1627.66 695.33 1579.47 686.37 886.93 1608.92 918.3 1643.38"/>
+ <polygon class="cls-15" points="1590.11 681.32 886.93 1608.92 850.79 1597.99 1555.1 654.99 1590.11 681.32"/>
+ <polygon class="cls-21" points="1710.3 701.77 1794.09 584.72 1841.97 640.14 1835.25 713.54 1792.67 759.49 1772.78 782.74 1710.3 701.77"/>
+ <path class="cls-7" d="M1795.84,586.29c.11-.22-1.19-1.17-1.75-1.57-51.2-37.29-92.38-32.54-92.38-32.54-13.92,1.64-25.63,6-34.74,10.59l-41.46,38.23-17.37,27.64,47.07,44.7c23.13,15.18,46.26,30.35,69.39,45.53,15.72-19.29,31.44-38.58,47.16-57.88,23.55-35.06,23.6-50.23,18.96-57.55-2.11-3.32-8.28-9.92-19.52-25.68-1.69-2.37-3.05-4.33-3.92-5.59,13.87,7.37,28.22,14.8,28.58,14.12Z"/>
+ <path class="cls-20" d="M1583.39,614.13l71.44-91.75,68.92,8.82c23.1,12.48,46.19,24.96,69.29,37.44-4.39,7.74-8.78,15.49-13.17,23.23-6-6.26-24.91-24.37-55.19-28.92-9.18-1.38-40.81-8.98-62.38,12.55-22.79,22.74-45.2,56.07-45.2,56.07l-25.03-7.45-8.68-10Z"/>
+ <polygon class="cls-17" points="1721.23 713.82 1660.15 786.66 1720.67 855.58 1772.78 782.74 1721.23 713.82"/>
+ <path class="cls-13" d="M1575.55,727.83l50.99-68.36s-22.41-13.45-36.42-17.37-35.02,12.89-35.02,12.89l-33.34,45.95,54.35,29.14-.56-2.24Z"/>
+ <polygon class="cls-6" points="1622.61 662.27 1575.55 721.1 1665.76 801.79 1719.55 726.15 1631.02 654.99 1619.25 660.59 1622.61 662.27"/>
+ <path class="cls-24" d="M909.9,1514.78s69.76,11.77,102.54-12.61,81.53-62.19,85.73-67.24,39.5-46.23,43.7-65.56,9.25-54.63-.84-70.6-41.18-32.78-41.18-32.78l-189.95,248.78Z"/>
+ <path class="cls-11" d="M828,1615.17c425.65-568.08,736.51-980.82,783.23-1043.44,7-9.38,27.21-36.18,60.05-43.13,35.82-7.58,64.69,11.43,92.34,29.64,29.04,19.12,74.83,49.27,78.44,100.48,2.36,33.42-15.18,60.38-22.79,71.35-48.03,69.24-354.13,474.14-777.3,1026.34"/>
+ <path class="cls-3" d="M749.04,1912.7c-2.97-8.65-1.36-16.97-.38-21.97.02-.11.01-.05,1.73-8.09,0,0,1.87-8.75,2.02-9.45,17.45-81.48,34.89-162.96,52.34-244.44,3.46-20.18,10.01-26.88,15.64-29.08,1.12-.44.95-.21,7.61-1.59,12.15-2.52,15.84-4.29,22.69-5.32,11.68-1.76,17.52-2.64,20.73-2.24,17.91,2.2,29.9,16.75,33.76,23.98,1.5,2.81,2.6,5.84,2.6,5.84,1.92,5.3,2.56,10.26,2.72,14.47,9.16-3.21,21.92-6.75,36.53-1.73,30.64,10.53,39.02,44.52,39.37,46.14,1.03,4.83,1.26,8.92,1.29,11.6,4.06-.76,10.9-1.55,18.77.28.81.19,1.37.38,1.84.52,15.86,4.83,27.11,16.57,27.11,16.57,3.07,3.2,7.11,7.49,10.09,14.29,2.52,5.76,1.58,7.16,3.55,13.17,4.75,14.52,14.21,15.79,12.47,23.21-1.63,6.91-10.43,14.36-12.89,16.44-2.28,1.92-5.63,4.39-5.88,4.58-1.87,1.37-5.1,3.67-9.34,6.26-5.67,3.47-10.19,5.66-10.83,5.98-11.6,5.75-210.18,120.11-236.96,133.49-1.87.94-7.38,3.69-14.57,3.5-2.77-.07-8.28-.22-13.49-3.9-5.56-3.93-7.49-9.54-8.5-12.49ZM853.44,1620.02c-4.21,1.16-6.15,2.98-6.72,3.56-3.59,3.59-3.91,8.54-4.06,10.37-.64,7.5-3.45,20.04-8.64,38.66-9.16,38.38-18.13,77.36-26.88,116.95-7.09,32.04-13.88,63.78-20.39,95.21,130.55-83.53,180.25-103.25,194.84-111.9,18.47-10.94,29.69-17.69,32-19.03,4.84-2.8,7.44-8.42,6.15-13.86-.01-.04-.02-.09-.03-.13-2.2-9.09-9.99-15.17-17.01-17.43-5.34-1.72-10.29-1.25-14.69-.82-8.26.8-10.63,3.15-15.83,1.82-5.75-1.47-9.16-5.95-10.02-7.07-4.69-6.16-2.7-10.97-4.55-20.85-.59-3.13-4.25-22.6-18.3-29.88-4.85-2.51-9.83-3-11.95-3.11-6.11-.32-8.36,1.47-18.31,3.11-7.98,1.32-11.97,1.97-14.94.75-7.84-3.23-9.87-15.1-10.46-20.17.18-1.2,1.88-14.08-6.72-21.67-9.34-8.23-21.22-5.12-23.49-4.49ZM822.43,1632.17h.01-.01Z"/>
+ <path class="cls-11" d="M1525.4,694.86s14.35,6.9,35.48,18.72c48.82,27.29,133.87,80.79,162.03,135.93"/>
+ <path class="cls-11" d="M1575.83,629.31c31.34,12.75,73.93,34.08,117.67,69.76,37.74,30.79,64.53,62.63,82.7,87.89"/>
+ <path class="cls-10" d="M866.38,1853.63c-.21-3.04-2.47-29.58-26.15-45.15-21.41-14.08-43.95-8.41-47.44-7.47"/>
+ </g>
+ <g id="hand">
+ <polygon class="cls-27" points="713.7 1146.38 799.42 1173.27 1036.43 1253.96 1115.94 1282.21 1118.8 1348.09 1075.1 1386.75 1002.82 1405.24 923.81 1418.69 799.42 1406.92 686.8 1353.13 636.37 1304.39 614.52 1213.62 654.86 1159.83 713.7 1146.38"/>
+ <polygon class="cls-26" points="1481.88 1219.78 1345.17 1402.44 1264.48 1283.66 1230.86 1216.42 1296.98 1181.68 1364.22 1195.13 1471.8 1207.45 1481.88 1219.78"/>
+ <path class="cls-22" d="M1253.66,1253.53c-1.01-12.4-2.33-42.79,12.42-50.01,5.39-2.64,11.02-1.25,13.07-.75,40.18,9.83,81.15,16.21,121.31,26.1,34.11,8.4,82.45,18.17,125.51-3.36,35.86-17.93,32.78-29.84,32.78-29.84,0,0-113,4.11-124.58-1.12-11.58-5.23-97.87-32.12-97.87-32.12l-60.51-15.32s-55.28,35.86-51.55,56.03,29.42,50.38,29.42,50.38Z"/>
+ <path class="cls-12" d="M1677.99,1226.5c-13.45-35.49-26.89-70.97-40.34-106.46-1.51-1.25-17.55-15.07-15.69-36.98,1.63-19.24,15.8-29.84,17.93-31.38-8.96,15.69-17.93,31.38-26.89,47.07-17.56,11.21-35.11,22.41-52.67,33.62-16.37,18.14-32.74,36.29-49.1,54.43h43.33c10.16,0,19.46-5.17,25.34-13.46,1.19-1.68,2.51-2.82,4.72-3.07,13.92-1.53,33.35,36.03,37.82,71.44,3.93,31.18-4.24,56.63-9.58,69.63-17.36,42.28-50.15,63.57-60.18,69.89-54.62,34.4-113.16,23.53-133.92,19.68-32.59-6.05-57.27-18.51-72.28-27.52l3.37-35.3c-32.07-28.19-64.13-56.38-96.19-84.56,1.81,11.38,3.61,22.75,5.42,34.13l-21.86,1.68c-2.04,12.46-7.17,53.63,17.44,93.92,13.42,21.96,30.48,35.17,41.4,42.24-.21.25-.25.46-.25.61.28,10.58,248.19,84.08,346.32-37.11,44.62-55.11,40.43-128.43,35.86-162.49Z"/>
+ <path class="cls-22" d="M754.14,1155.47s-12.33,23.81,80.12,81.81c92.45,57.99,213.48,57.15,213.48,57.15,0,0,29.42-.84,41.18,17.65,11.77,18.49,17.65,38.66,17.65,38.66,0,0,15.13-13.45,15.13-35.3s-24.37-44.54-35.3-50.43c-10.93-5.88-74.8-17.65-88.25-22.69s-57.15-22.69-86.57-28.58c-29.42-5.88-89.93-31.94-103.38-39.5-13.45-7.56-49.59-25.21-49.59-25.21l-4.48,6.44Z"/>
+ <path class="cls-12" d="M1063.06,1369.04c-22.71,7.6-45.67,14.66-68.83,20.79-22.93,6.07-46.63,8.56-70.27,9.76-38.83,1.97-78.27,2.5-116.61-4.89-60.96-11.75-116.59-53.57-162.19-94.1-11.2-9.95-21.23,17.42-22.14,23.61-10.16,69.39,49.25,138.38,101.36,176.24,32.1,23.32,69.55,38.01,104.84,55.65,4.26-7.51,8.52-15.03,12.78-22.54,5.05-7.43,14-18.94,28.02-29.14,45.11-32.82,86.08-10.76,121.03-42.58,11.96-10.89,6.01-12.42,32.5-47.07,15.46-20.21,29.68-35.64,39.51-45.72Z"/>
+ <path class="cls-3" d="M766.01,1141.24c23.12,13.07,46.89,24.97,71.33,35.32,22.56,9.48,51.82,18.37,75.42,26.19,9.96,3.3,20.23,6.54,30.3,9.27,19.95,5.47,40.62,9.62,61.05,13.3,20.49,1.7,63.4,8.67,91.64,19.33,8.79,3.33,17,6.9,25.08,12.99,13,9.89,21.32,24.87,24.55,40.74,5.92,30.95-10.16,57.32-31.49,78.14-7.29,7.33-15.67,13.95-24.68,19.03-30.34,17.51-67.19,21.31-101.01,16.06-7.73-1.22-15.37-2.89-22.81-5.31-2.86-.93-4.43-4.01-3.5-6.87.69-2.12,2.55-3.53,4.64-3.74,28.18-3.07,56.76-7.97,82.07-19.34,15.21-6.87,27.63-15.6,37.99-27.52,5.78-6.49,10.84-12.95,14.64-20.56,2.75-5.75,4.65-12.19,3.9-18.51-.59-6.52-3.86-13.37-8.58-17.89-4.22-3.47-10.03-6.01-15.62-8.21-25.38-9.42-56.31-15.99-81.47-19.53-4.11-.6-1.18-.17-2.11-.31,0,0-.06-.01-.06-.01l-.13-.03-.25-.06-.5-.11c-21.41-4.74-42.72-9.91-63.7-16.55-10.54-3.28-21.26-7.19-31.59-11.11-20.66-7.77-41.07-15.33-61.4-24.47-20.35-9.32-39.89-20.5-58.63-32.72-9.31-6.1-18.4-12.52-27.19-19.3-4.79-3.7-5.68-10.58-1.98-15.37,3.38-4.38,9.42-5.5,14.08-2.84h0Z"/>
+ <path class="cls-3" d="M1058.68,1406.09c-1.35,18.69-9.12,37.33-22.02,51.04-11.95,12.58-26.1,20.92-41.11,28.83-32.75,16.94-70.8,22.44-107.29,21.85-15.05-.13-29.59-.45-44.82-1.87-48.36-4.72-95.97-20.62-136.68-47.29-27.24-18.43-51.17-42.62-66.73-71.74-4.31-8.4,5.49-16.92,13.18-11.47,3.25,2.45,8.24,6.27,11.55,8.84,55.11,42.74,111.73,73.01,182.45,78.12,12.85,1.07,28,1.04,41.21,1.12,9.02,0,17.86-.26,26.73-.98,17.01-1.54,33.53-4.6,49.6-10.71,7.84-3.04,15.56-6.69,22.91-10.81,9.31-5.45,19.02-11.33,24.68-20.46,3.67-5.77,6.03-12.36,7.07-19.23,4.99-24.64,40.26-20.34,39.28,4.77h0Z"/>
+ <path class="cls-3" d="M1319.29,1344.04c-17.62-5.83-33.72-15.62-48.37-26.96-25.07-19.23-46.15-43.84-59.93-72.49-6.12-12.54-9.85-25.84-10.95-39.95-1.37-14.97,2.39-31.15,10.16-44.22,9.62-17.2,27.54-31.85,47.51-34.64,17.36-2.54,33.93-.24,50.67,3.03,18.09,3.58,35.98,10.84,52.7,17.7,10.17,3.99,20.29,7.33,30.86,10.16,15.4,4.03,34.17,7.93,50.22,11.54,15.82,3.57,33.85,7.86,49.58,10.71,22.66,4.21,45.36,5.97,68.85,8.08.24.01.32.38.11.49-11.96,6.95-25.03,11.6-38.41,14.96-10.53,2.54-21.27,4.17-32.1,4.76-24.1,1.51-48.36-2.4-71.97-5.97-11.87-1.83-23.7-3.68-35.58-6.34-17.73-3.7-35.87-10.33-52.49-17.08-14.98-5.92-29.98-10.26-45.84-12.46-8.2-1.18-18.54-2.13-25.43.04-7,2.61-12.4,7.67-16.51,14.15-23.21,35.5,23.63,90.19,48.36,114.51,12.13,11.73,25,21.86,38.11,32.88,8.27,7.19.88,20.36-9.54,17.1h0Z"/>
+ <path class="cls-3" d="M1543.75,1476.36c-46.6,21.74-101.18,27.72-151.15,14.53-29.78-7.7-57.7-22.3-82.47-40.12-16.28-11.77-30.75-22.86-46.23-35.75-16.28-13.65-31.14-29.95-40.47-49.36-18.85-38.21-17.19-84.66,1.28-121.89,2.43-4.92,8.38-6.93,13.3-4.5,4.01,1.98,6.09,6.31,5.4,10.51-2.98,17.88-4.1,35.6-2.26,52.51,2.75,24.93,11.37,48.14,28.06,66.5,11.69,12.73,26.41,23.23,40.72,33.91,34.98,27.03,73.56,50.01,117.84,54.78,34.53,4.18,69.46-1.4,101.84-14.21,21.85-7.72,34.9,22.5,14.15,33.1h0Z"/>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/src/PageWrapper.jsx b/src/PageWrapper.jsx
deleted file mode 100644
index f39868c..0000000
--- a/src/PageWrapper.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-/**
- * A simple wrapper applied to every page in the demo project. Feel free to
- * replace this with your own layout – the scratch CLI will automatically detect
- * the component and wrap each MDX page with it during the build.
- */
-export default function PageWrapper({ children }) {
- return (
- <div className="min-h-screen bg-white prose max-w-2xl mx-auto px-6 py-8">
- <div className="not-prose flex justify-center gap-4 mb-4">
- <a href="https://github.com/scratch/scratch" target="_blank" rel="noopener noreferrer" className="opacity-30 hover:opacity-100 transition-opacity">
- <img src="/github-mark.svg" alt="GitHub" className="w-6 h-6" />
- </a>
- <a href="https://x.com/koomen" target="_blank" rel="noopener noreferrer" className="opacity-30 hover:opacity-100 transition-opacity">
- <img src="/x-logo.svg" alt="X" className="w-6 h-6" />
- </a>
- </div>
- {children}
- <footer className="text-center text-gray-400 text-sm mt-16 pb-8">
- Released under the MIT License
- <br />
- Copyright 2025 Pete Koomen
- </footer>
- </div>
- );
-}
diff --git a/src/ScratchBadge.jsx b/src/ScratchBadge.jsx
new file mode 100644
index 0000000..e78c853
--- /dev/null
+++ b/src/ScratchBadge.jsx
@@ -0,0 +1,13 @@
+export default function ScratchBadge() {
+ return (
+ <a
+ href="https://scratch.dev"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="inline-flex items-center text-black text-base font-normal no-underline hover:no-underline"
+ >
+ <span className="text-lg">Made from</span>
+ <img src="/scratch-logo.svg" alt="Scratch" className="h-13 pb-1" />
+ </a>
+ );
+}
diff --git a/src/tailwind.css b/src/tailwind.css
index a31aad8..678c7b5 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -11,9 +11,19 @@
* Custom prose overrides for elements not fully styled by @tailwindcss/typography
*/
+/* Links - only underline on hover */
+.prose :where(a):not(:where([class~='not-prose'] *)) {
+ @apply no-underline hover:underline;
+}
+
+/* H1 - center and add extra top margin */
+.prose :where(h1):not(:where([class~='not-prose'] *)) {
+ @apply text-center mt-16;
+}
+
/* Inline code - add background and padding, remove backticks */
.prose :where(code):not(:where([class~='not-prose'], pre *)) {
- @apply text-gray-900 font-medium text-[0.9em] bg-gray-100 px-1.5 py-0.5 rounded;
+ @apply text-gray-700 font-medium text-[0.9em] bg-gray-50 px-1.5 py-0.5 rounded;
}
.prose :where(code):not(:where([class~='not-prose'], pre *))::before,
@@ -44,9 +54,9 @@
@apply mr-2 align-middle ml-1;
}
-/* Tables - add horizontal padding, prevent overflow */
+/* Tables - center by default, prevent overflow */
.prose :where(table):not(:where([class~='not-prose'] *)) {
- @apply mx-4 w-auto max-w-full;
+ @apply mx-auto w-auto max-w-full;
}
/*
diff --git a/src/template/Copyright.jsx b/src/template/Copyright.jsx
new file mode 100644
index 0000000..131a290
--- /dev/null
+++ b/src/template/Copyright.jsx
@@ -0,0 +1,14 @@
+export default function Copyright({ name }) {
+ const author = name || (typeof window !== 'undefined' && window.__scratch_author__);
+ const year = new Date().getFullYear();
+
+ if (!author) {
+ return null;
+ }
+
+ return (
+ <p className="text-gray-400 text-sm">
+ © {year} {author}
+ </p>
+ );
+}
diff --git a/src/template/Footer.jsx b/src/template/Footer.jsx
new file mode 100644
index 0000000..c9055c1
--- /dev/null
+++ b/src/template/Footer.jsx
@@ -0,0 +1,11 @@
+import ScratchBadge from './ScratchBadge';
+import Copyright from './Copyright';
+
+export default function Footer() {
+ return (
+ <footer className="not-prose text-center mt-16 pb-8">
+ <ScratchBadge />
+ <Copyright />
+ </footer>
+ );
+}
diff --git a/src/template/Header.jsx b/src/template/Header.jsx
new file mode 100644
index 0000000..d6b3d2f
--- /dev/null
+++ b/src/template/Header.jsx
@@ -0,0 +1,20 @@
+export default function Header() {
+ return (
+ <header className="not-prose flex justify-between items-center mb-4">
+ <a href="/" className="opacity-60 hover:opacity-100 transition-opacity">
+ <img src="/scratch-logo.svg" alt="Scratch" className="h-10" />
+ </a>
+ <nav className="flex gap-6">
+ <a href="/docs/" className="opacity-60 hover:opacity-100 transition-opacity">Docs</a>
+ </nav>
+ <div className="flex gap-4">
+ <a href="https://github.com/scratch/scratch" target="_blank" rel="noopener noreferrer" className="opacity-60 hover:opacity-100 transition-opacity">
+ <img src="/github-mark.svg" alt="GitHub" className="w-6 h-6" />
+ </a>
+ <a href="https://x.com/koomen" target="_blank" rel="noopener noreferrer" className="opacity-60 hover:opacity-100 transition-opacity">
+ <img src="/x-logo.svg" alt="X" className="w-6 h-6" />
+ </a>
+ </div>
+ </header>
+ );
+}
diff --git a/src/template/PageWrapper.jsx b/src/template/PageWrapper.jsx
new file mode 100644
index 0000000..d727feb
--- /dev/null
+++ b/src/template/PageWrapper.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Header from './Header';
+import Footer from './Footer';
+
+/**
+ * A simple wrapper applied to every page in the demo project. Feel free to
+ * replace this with your own layout – the scratch CLI will automatically detect
+ * the component and wrap each MDX page with it during the build.
+ */
+export default function PageWrapper({ children }) {
+ return (
+ <div className="min-h-screen bg-white prose max-w-3xl mx-auto px-6 py-8">
+ <Header />
+ {children}
+ <Footer />
+ </div>
+ );
+}
diff --git a/src/template/ScratchBadge.jsx b/src/template/ScratchBadge.jsx
new file mode 100644
index 0000000..e78c853
--- /dev/null
+++ b/src/template/ScratchBadge.jsx
@@ -0,0 +1,13 @@
+export default function ScratchBadge() {
+ return (
+ <a
+ href="https://scratch.dev"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="inline-flex items-center text-black text-base font-normal no-underline hover:no-underline"
+ >
+ <span className="text-lg">Made from</span>
+ <img src="/scratch-logo.svg" alt="Scratch" className="h-13 pb-1" />
+ </a>
+ );
+}