@react-email/preview-server 5.0.0-canary.9 → 5.0.0

package/.next/trace

@@ -1 +1 @@
-[{"name":"generate-buildid","duration":178,"timestamp":69001557,"id":4,"parentId":1,"tags":{},"startTime":1762453627387,"traceId":"d4bc472d11b223ac"},{"name":"load-custom-routes","duration":173,"timestamp":69001797,"id":5,"parentId":1,"tags":{},"startTime":1762453627387,"traceId":"d4bc472d11b223ac"},{"name":"create-dist-dir","duration":177,"timestamp":69001987,"id":6,"parentId":1,"tags":{},"startTime":1762453627387,"traceId":"d4bc472d11b223ac"},{"name":"clean","duration":122,"timestamp":69002724,"id":7,"parentId":1,"tags":{},"startTime":1762453627388,"traceId":"d4bc472d11b223ac"},{"name":"create-pages-mapping","duration":130,"timestamp":69032018,"id":8,"parentId":1,"tags":{},"startTime":1762453627417,"traceId":"d4bc472d11b223ac"},{"name":"collect-app-files","duration":1603,"timestamp":69032174,"id":9,"parentId":1,"tags":{},"startTime":1762453627418,"traceId":"d4bc472d11b223ac"},{"name":"create-app-mapping","duration":961,"timestamp":69033796,"id":10,"parentId":1,"tags":{},"startTime":1762453627419,"traceId":"d4bc472d11b223ac"},{"name":"create-app-layouts","duration":102,"timestamp":69034780,"id":11,"parentId":1,"tags":{},"startTime":1762453627420,"traceId":"d4bc472d11b223ac"},{"name":"collect-default-files","duration":374,"timestamp":69035597,"id":13,"parentId":1,"tags":{},"startTime":1762453627421,"traceId":"d4bc472d11b223ac"},{"name":"generate-route-types","duration":8432,"timestamp":69035184,"id":12,"parentId":1,"tags":{},"startTime":1762453627421,"traceId":"d4bc472d11b223ac"},{"name":"public-dir-conflict-check","duration":57,"timestamp":69043683,"id":14,"parentId":1,"tags":{},"startTime":1762453627429,"traceId":"d4bc472d11b223ac"},{"name":"generate-routes-manifest","duration":1261,"timestamp":69043786,"id":15,"parentId":1,"tags":{},"startTime":1762453627429,"traceId":"d4bc472d11b223ac"},{"name":"run-turbopack","duration":7019096,"timestamp":69047255,"id":17,"parentId":1,"tags":{},"startTime":1762453627433,"traceId":"d4bc472d11b223ac"},{"name":"run-typescript","duration":5028787,"timestamp":76072326,"id":19,"parentId":1,"tags":{},"startTime":1762453634458,"traceId":"d4bc472d11b223ac"},{"name":"check-static-error-page","duration":1872,"timestamp":81146400,"id":22,"parentId":21,"tags":{},"startTime":1762453639532,"traceId":"d4bc472d11b223ac"},{"name":"is-page-static","duration":120818,"timestamp":81152424,"id":29,"parentId":24,"tags":{},"startTime":1762453639538,"traceId":"d4bc472d11b223ac"},{"name":"check-page","duration":125396,"timestamp":81147925,"id":24,"parentId":21,"tags":{"page":"/_global-error"},"startTime":1762453639533,"traceId":"d4bc472d11b223ac"},{"name":"is-page-static","duration":157997,"timestamp":81152213,"id":28,"parentId":23,"tags":{},"startTime":1762453639538,"traceId":"d4bc472d11b223ac"},{"name":"check-page","duration":163085,"timestamp":81147184,"id":23,"parentId":21,"tags":{"page":"/_not-found"},"startTime":1762453639533,"traceId":"d4bc472d11b223ac"},{"name":"is-page-static","duration":161233,"timestamp":81160617,"id":31,"parentId":25,"tags":{},"startTime":1762453639546,"traceId":"d4bc472d11b223ac"},{"name":"check-page","duration":174447,"timestamp":81148105,"id":25,"parentId":21,"tags":{"page":"/"},"startTime":1762453639534,"traceId":"d4bc472d11b223ac"},{"name":"is-page-static","duration":187389,"timestamp":81153097,"id":30,"parentId":27,"tags":{},"startTime":1762453639539,"traceId":"d4bc472d11b223ac"},{"name":"check-page","duration":192332,"timestamp":81148210,"id":27,"parentId":21,"tags":{"page":"/favicon.ico"},"startTime":1762453639534,"traceId":"d4bc472d11b223ac"},{"name":"is-page-static","duration":496050,"timestamp":81161755,"id":32,"parentId":26,"tags":{},"startTime":1762453639547,"traceId":"d4bc472d11b223ac"},{"name":"check-page","duration":509698,"timestamp":81148166,"id":26,"parentId":21,"tags":{"page":"/preview/[...slug]"},"startTime":1762453639534,"traceId":"d4bc472d11b223ac"},{"name":"static-check","duration":511984,"timestamp":81145901,"id":21,"parentId":1,"tags":{},"startTime":1762453639531,"traceId":"d4bc472d11b223ac"},{"name":"generate-required-server-files","duration":264,"timestamp":81658019,"id":34,"parentId":1,"tags":{},"startTime":1762453640043,"traceId":"d4bc472d11b223ac"},{"name":"write-routes-manifest","duration":146,"timestamp":81658660,"id":35,"parentId":1,"tags":{},"startTime":1762453640044,"traceId":"d4bc472d11b223ac"},{"name":"load-dotenv","duration":18,"timestamp":81666001,"id":38,"parentId":37,"tags":{},"startTime":1762453640051,"traceId":"d4bc472d11b223ac"},{"name":"run-export-path-map","duration":323,"timestamp":81668247,"id":39,"parentId":37,"tags":{},"startTime":1762453640054,"traceId":"d4bc472d11b223ac"},{"name":"next-export","duration":283116,"timestamp":81665409,"id":37,"parentId":1,"tags":{},"startTime":1762453640051,"traceId":"d4bc472d11b223ac"},{"name":"move-exported-app-global-error-","duration":274,"timestamp":81949218,"id":40,"parentId":36,"tags":{},"startTime":1762453640335,"traceId":"d4bc472d11b223ac"},{"name":"static-generation","duration":287318,"timestamp":81662920,"id":36,"parentId":1,"tags":{},"startTime":1762453640048,"traceId":"d4bc472d11b223ac"},{"name":"write-routes-manifest","duration":149,"timestamp":81950313,"id":41,"parentId":1,"tags":{},"startTime":1762453640336,"traceId":"d4bc472d11b223ac"},{"name":"print-tree-view","duration":977,"timestamp":81953349,"id":42,"parentId":1,"tags":{},"startTime":1762453640339,"traceId":"d4bc472d11b223ac"},{"name":"telemetry-flush","duration":201067,"timestamp":81954332,"id":43,"parentId":1,"tags":{},"startTime":1762453640340,"traceId":"d4bc472d11b223ac"},{"name":"next-build","duration":13283168,"timestamp":68872252,"id":1,"tags":{"buildMode":"default","version":"16.0.1","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1762453627258,"traceId":"d4bc472d11b223ac"}]
+[{"name":"generate-buildid","duration":124,"timestamp":62539648,"id":4,"parentId":1,"tags":{},"startTime":1762516954526,"traceId":"3d5c6166a4113d0b"},{"name":"load-custom-routes","duration":157,"timestamp":62539824,"id":5,"parentId":1,"tags":{},"startTime":1762516954526,"traceId":"3d5c6166a4113d0b"},{"name":"create-dist-dir","duration":220,"timestamp":62540019,"id":6,"parentId":1,"tags":{},"startTime":1762516954527,"traceId":"3d5c6166a4113d0b"},{"name":"clean","duration":116,"timestamp":62540838,"id":7,"parentId":1,"tags":{},"startTime":1762516954527,"traceId":"3d5c6166a4113d0b"},{"name":"create-pages-mapping","duration":106,"timestamp":62567222,"id":8,"parentId":1,"tags":{},"startTime":1762516954554,"traceId":"3d5c6166a4113d0b"},{"name":"collect-app-files","duration":1412,"timestamp":62567349,"id":9,"parentId":1,"tags":{},"startTime":1762516954554,"traceId":"3d5c6166a4113d0b"},{"name":"create-app-mapping","duration":796,"timestamp":62568775,"id":10,"parentId":1,"tags":{},"startTime":1762516954555,"traceId":"3d5c6166a4113d0b"},{"name":"create-app-layouts","duration":66,"timestamp":62569586,"id":11,"parentId":1,"tags":{},"startTime":1762516954556,"traceId":"3d5c6166a4113d0b"},{"name":"collect-default-files","duration":272,"timestamp":62570146,"id":13,"parentId":1,"tags":{},"startTime":1762516954557,"traceId":"3d5c6166a4113d0b"},{"name":"generate-route-types","duration":6839,"timestamp":62569870,"id":12,"parentId":1,"tags":{},"startTime":1762516954556,"traceId":"3d5c6166a4113d0b"},{"name":"public-dir-conflict-check","duration":45,"timestamp":62576751,"id":14,"parentId":1,"tags":{},"startTime":1762516954563,"traceId":"3d5c6166a4113d0b"},{"name":"generate-routes-manifest","duration":991,"timestamp":62576830,"id":15,"parentId":1,"tags":{},"startTime":1762516954563,"traceId":"3d5c6166a4113d0b"},{"name":"run-turbopack","duration":5520702,"timestamp":62579585,"id":17,"parentId":1,"tags":{},"startTime":1762516954566,"traceId":"3d5c6166a4113d0b"},{"name":"run-typescript","duration":4406823,"timestamp":68121246,"id":19,"parentId":1,"tags":{},"startTime":1762516960108,"traceId":"3d5c6166a4113d0b"},{"name":"check-static-error-page","duration":1268,"timestamp":72579882,"id":22,"parentId":21,"tags":{},"startTime":1762516964566,"traceId":"3d5c6166a4113d0b"},{"name":"is-page-static","duration":114250,"timestamp":72585086,"id":30,"parentId":24,"tags":{},"startTime":1762516964572,"traceId":"3d5c6166a4113d0b"},{"name":"check-page","duration":118518,"timestamp":72580894,"id":24,"parentId":21,"tags":{"page":"/_global-error"},"startTime":1762516964567,"traceId":"3d5c6166a4113d0b"},{"name":"is-page-static","duration":141428,"timestamp":72585027,"id":29,"parentId":27,"tags":{},"startTime":1762516964572,"traceId":"3d5c6166a4113d0b"},{"name":"check-page","duration":145383,"timestamp":72581114,"id":27,"parentId":21,"tags":{"page":"/favicon.ico"},"startTime":1762516964568,"traceId":"3d5c6166a4113d0b"},{"name":"is-page-static","duration":149635,"timestamp":72587479,"id":31,"parentId":25,"tags":{},"startTime":1762516964574,"traceId":"3d5c6166a4113d0b"},{"name":"check-page","duration":156112,"timestamp":72581038,"id":25,"parentId":21,"tags":{"page":"/"},"startTime":1762516964568,"traceId":"3d5c6166a4113d0b"},{"name":"is-page-static","duration":165003,"timestamp":72584531,"id":28,"parentId":23,"tags":{},"startTime":1762516964571,"traceId":"3d5c6166a4113d0b"},{"name":"check-page","duration":169127,"timestamp":72580440,"id":23,"parentId":21,"tags":{"page":"/_not-found"},"startTime":1762516964567,"traceId":"3d5c6166a4113d0b"},{"name":"is-page-static","duration":497396,"timestamp":72587691,"id":32,"parentId":26,"tags":{},"startTime":1762516964574,"traceId":"3d5c6166a4113d0b"},{"name":"check-page","duration":504061,"timestamp":72581073,"id":26,"parentId":21,"tags":{"page":"/preview/[...slug]"},"startTime":1762516964568,"traceId":"3d5c6166a4113d0b"},{"name":"static-check","duration":505608,"timestamp":72579541,"id":21,"parentId":1,"tags":{},"startTime":1762516964566,"traceId":"3d5c6166a4113d0b"},{"name":"generate-required-server-files","duration":261,"timestamp":73085276,"id":34,"parentId":1,"tags":{},"startTime":1762516965072,"traceId":"3d5c6166a4113d0b"},{"name":"write-routes-manifest","duration":167,"timestamp":73085893,"id":35,"parentId":1,"tags":{},"startTime":1762516965072,"traceId":"3d5c6166a4113d0b"},{"name":"load-dotenv","duration":14,"timestamp":73090821,"id":38,"parentId":37,"tags":{},"startTime":1762516965077,"traceId":"3d5c6166a4113d0b"},{"name":"run-export-path-map","duration":191,"timestamp":73091910,"id":39,"parentId":37,"tags":{},"startTime":1762516965078,"traceId":"3d5c6166a4113d0b"},{"name":"next-export","duration":236175,"timestamp":73090320,"id":37,"parentId":1,"tags":{},"startTime":1762516965077,"traceId":"3d5c6166a4113d0b"},{"name":"move-exported-app-global-error-","duration":379,"timestamp":73327163,"id":40,"parentId":36,"tags":{},"startTime":1762516965314,"traceId":"3d5c6166a4113d0b"},{"name":"static-generation","duration":240225,"timestamp":73088212,"id":36,"parentId":1,"tags":{},"startTime":1762516965075,"traceId":"3d5c6166a4113d0b"},{"name":"write-routes-manifest","duration":152,"timestamp":73328504,"id":41,"parentId":1,"tags":{},"startTime":1762516965315,"traceId":"3d5c6166a4113d0b"},{"name":"print-tree-view","duration":906,"timestamp":73330892,"id":42,"parentId":1,"tags":{},"startTime":1762516965317,"traceId":"3d5c6166a4113d0b"},{"name":"telemetry-flush","duration":175230,"timestamp":73331804,"id":43,"parentId":1,"tags":{},"startTime":1762516965318,"traceId":"3d5c6166a4113d0b"},{"name":"next-build","duration":11080462,"timestamp":62426591,"id":1,"tags":{"buildMode":"default","version":"16.0.1","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1762516954413,"traceId":"3d5c6166a4113d0b"}]

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-turbopack","duration":7019096,"timestamp":69047255,"id":17,"parentId":1,"tags":{},"startTime":1762453627433,"traceId":"d4bc472d11b223ac"},{"name":"run-typescript","duration":5028787,"timestamp":76072326,"id":19,"parentId":1,"tags":{},"startTime":1762453634458,"traceId":"d4bc472d11b223ac"},{"name":"static-check","duration":511984,"timestamp":81145901,"id":21,"parentId":1,"tags":{},"startTime":1762453639531,"traceId":"d4bc472d11b223ac"},{"name":"static-generation","duration":287318,"timestamp":81662920,"id":36,"parentId":1,"tags":{},"startTime":1762453640048,"traceId":"d4bc472d11b223ac"},{"name":"telemetry-flush","duration":201067,"timestamp":81954332,"id":43,"parentId":1,"tags":{},"startTime":1762453640340,"traceId":"d4bc472d11b223ac"},{"name":"next-build","duration":13283168,"timestamp":68872252,"id":1,"tags":{"buildMode":"default","version":"16.0.1","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1762453627258,"traceId":"d4bc472d11b223ac"}]
+[{"name":"run-turbopack","duration":5520702,"timestamp":62579585,"id":17,"parentId":1,"tags":{},"startTime":1762516954566,"traceId":"3d5c6166a4113d0b"},{"name":"run-typescript","duration":4406823,"timestamp":68121246,"id":19,"parentId":1,"tags":{},"startTime":1762516960108,"traceId":"3d5c6166a4113d0b"},{"name":"static-check","duration":505608,"timestamp":72579541,"id":21,"parentId":1,"tags":{},"startTime":1762516964566,"traceId":"3d5c6166a4113d0b"},{"name":"static-generation","duration":240225,"timestamp":73088212,"id":36,"parentId":1,"tags":{},"startTime":1762516965075,"traceId":"3d5c6166a4113d0b"},{"name":"telemetry-flush","duration":175230,"timestamp":73331804,"id":43,"parentId":1,"tags":{},"startTime":1762516965318,"traceId":"3d5c6166a4113d0b"},{"name":"next-build","duration":11080462,"timestamp":62426591,"id":1,"tags":{"buildMode":"default","version":"16.0.1","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1762516954413,"traceId":"3d5c6166a4113d0b"}]

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @react-email/preview-server
 
+## 5.0.0
+
+### Major Changes
+
+- 442f5b6: only check compatibility with tailwindcss@4
+
+### Minor Changes
+
+- 161083a: Integrate with Templates API so users can easily turn React Email templates into actual Resend templates
+- 95c7417: Dark mode switcher emulating email client color inversion
+
+### Patch Changes
+
+- c6fa03e: improve color inversion code, don't remount iframe
+- b6b027c: advise `npx` to run email setup command
+- 18bc11a: fix compatibility checking not woring with inline object styles, and not working on properties such as `justifyContent`/`justify-content`
+- e1ef323: improve reading flow for resend integration setup instructions
+- 1b3176e: fallback to not text coloring for Node.js < 20
+- f43f1ce: show separate timings for bundling/rendering an email template
+- 397e98c: darken the canvas background when dark mode is enabled
+- ef8702b: ui improvements
+- 75d651b: reduce margins bellow buttons
+- Updated dependencies [1e76981]
+- Updated dependencies [442f5b6]
+- Updated dependencies [2452b7d]
+  - @react-email/tailwind@2.0.0
+
+## 5.0.0-canary.12
+
+### Patch Changes
+
+- ef8702b: ui improvements
+
+## 5.0.0-canary.11
+
+### Patch Changes
+
+- 75d651b: reduce margins bellow buttons
+
+## 5.0.0-canary.10
+
+### Patch Changes
+
+- 397e98c: darken the canvas background when dark mode is enabled
+
 ## 5.0.0-canary.9
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/preview-server",
-  "version": "5.0.0-canary.9",
+  "version": "5.0.0",
   "description": "A live preview of your emails right in your browser.",
   "main": "./index.mjs",
   "dependencies": {
@@ -17,7 +17,7 @@
     "@radix-ui/react-toggle": "1.1.10",
     "@radix-ui/react-toggle-group": "1.1.11",
     "@radix-ui/react-tooltip": "1.2.8",
-    "@react-email/tailwind": "2.0.0-canary.4",
+    "@react-email/tailwind": "2.0.0",
     "@types/node": "22.14.1",
     "@types/normalize-path": "3.0.2",
     "@types/react": "19.0.10",
@@ -65,7 +65,7 @@
     "autoprefixer": "10.4.21",
     "tailwindcss": "3.4.0",
     "typescript": "5.8.3",
-    "@react-email/components": "1.0.0-canary.7"
+    "@react-email/components": "1.0.0"
   },
   "license": "MIT",
   "repository": {

package/src/app/preview/[...slug]/preview.tsx

@@ -98,6 +98,10 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
       <Topbar emailTitle={emailTitle}>
         {activeView === 'preview' ? (
           <>
+            <EmulatedDarkModeToggle
+              enabled={isDarkModeEnabled}
+              onChange={(enabled) => handleDarkModeChange(enabled)}
+            />
             <ViewSizeControls
               setViewHeight={(height) => {
                 setHeight(height);
@@ -116,10 +120,6 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
               minWidth={minWidth}
               minHeight={minHeight}
             />
-            <EmulatedDarkModeToggle
-              enabled={isDarkModeEnabled}
-              onChange={(enabled) => handleDarkModeChange(enabled)}
-            />
           </>
         ) : null}
         <ActiveViewToggleGroup
@@ -138,6 +138,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
         className={cn(
           'h-[calc(100%-3.5rem-2.375rem)] will-change-[height] flex p-4 transition-[height] duration-300 relative',
           activeView === 'preview' && 'bg-gray-200',
+          activeView === 'preview' && isDarkModeEnabled && 'bg-gray-400',
           toolbarToggled && 'h-[calc(100%-3.5rem-13rem)]',
           className,
         )}

package/src/components/button.tsx

@@ -71,7 +71,7 @@ const getAppearance = (appearance: Appearance | undefined) => {
         'border-white bg-white text-black transition-colors duration-200 ease-in-out',
         'hover:bg-white/90',
         'focus:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white/20',
-        'mt-2 mb-4 aria-disabled:border-transparent aria-disabled:bg-slate-11',
+        'mt-2 mb-2 aria-disabled:border-transparent aria-disabled:bg-slate-11',
       ];
     case 'gradient':
       return [

package/src/components/icons/icon-moon.tsx

@@ -4,8 +4,11 @@ import { IconBase } from './icon-base';
 export const IconMoon = ({ ...props }: IconProps) => (
   <IconBase {...props}>
     <path
-      fill="currentColor"
-      d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
     />
   </IconBase>
 );

package/src/components/icons/icon-sun.tsx

@@ -3,9 +3,70 @@ import { IconBase } from './icon-base';
 
 export const IconSun = ({ ...props }: IconProps) => (
   <IconBase {...props}>
+    <circle
+      cx="12"
+      cy="12"
+      r="4"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 2v2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 20v2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m4.93 4.93 1.41 1.41"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m17.66 17.66 1.41 1.41"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M2 12h2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M20 12h2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m6.34 17.66-1.41 1.41"
+    />
     <path
-      fill="currentColor"
-      d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m19.07 4.93-1.41 1.41"
     />
   </IconBase>
 );

package/src/components/topbar/active-view-toggle-group.tsx

@@ -18,7 +18,7 @@ export const ActiveViewToggleGroup = ({
   return (
     <ToggleGroup.Root
       aria-label="View mode"
-      className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
+      className="lg:absolute lg:left-1/2 lg:-translate-x-1/2 inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
       onValueChange={(value) => {
         if (value) setActiveView(value);
       }}
@@ -32,8 +32,8 @@ export const ActiveViewToggleGroup = ({
               className={cn(
                 'w-9 flex items-center py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
                 {
-                  'text-slate-11': activeView !== 'desktop',
-                  'text-slate-12': activeView === 'desktop',
+                  'text-slate-11': activeView !== 'preview',
+                  'text-slate-12': activeView === 'preview',
                 },
               )}
             >

package/src/components/topbar/emulated-dark-mode-toggle.tsx

@@ -1,6 +1,7 @@
 import * as Toggle from '@radix-ui/react-toggle';
 import { cn } from '../../utils';
 import { IconMoon } from '../icons/icon-moon';
+import { IconSun } from '../icons/icon-sun';
 import { Tooltip } from '../tooltip';
 
 interface EmulatedDarkModeToggleProps {
@@ -19,12 +20,33 @@ export const EmulatedDarkModeToggle = ({
           value="dark"
           className={cn(
             'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out',
-            'text-slate-11 hover:text-slate-12 aria-pressed:text-slate-12 aria-pressed:bg-slate-4',
+            'text-slate-11 hover:text-slate-12 aria-pressed:bg-slate-4',
           )}
           pressed={enabled}
           onPressedChange={() => onChange(!enabled)}
         >
-          <IconMoon />
+          <div className="relative w-5 h-5">
+            <div
+              className={cn(
+                'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out',
+                enabled
+                  ? 'opacity-0 scale-50 rotate-90'
+                  : 'opacity-100 scale-100 rotate-0',
+              )}
+            >
+              <IconMoon />
+            </div>
+            <div
+              className={cn(
+                'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out',
+                enabled
+                  ? 'opacity-100 scale-100 rotate-0'
+                  : 'opacity-0 scale-50 -rotate-90',
+              )}
+            >
+              <IconSun />
+            </div>
+          </div>
         </Toggle.Root>
       </Tooltip.Trigger>
       <Tooltip.Content>

package/src/components/topbar/view-size-controls.tsx

@@ -88,9 +88,7 @@ export const ViewSizeControls = ({
               className={cn(
                 'relative flex items-center justify-center w-9 transition-colors hover:text-slate-12',
                 {
-                  'bg-slate-4':
-                    viewWidth === preset.dimensions.width &&
-                    viewHeight === preset.dimensions.height,
+                  'bg-slate-4': viewWidth === preset.dimensions.width,
                 },
               )}
               type="button"