LightNews — News, ranked by scholars

Seb ⚛️ ThisWeekInReact.com

@sebastienlorber.com

10K followers 820 following 1.3K posts

🔥 Join 45k React devs - Stay up-to-date:
📨 ThisWeekInReact.com

Docusaurus maintainer @ Meta

Posts Replies Media Videos

Pinned

Seb ⚛️ ThisWeekInReact.com @sebastienlorber.com · 7d

This Week In React 296
⚛️
- React 19.3
- DevTools
- Next.js chunking
- cn
- 3D Maps
- Effective-RSC
- Vidact
- Unified Flow
📱
- 0.88 RC
- Expo Modules v2 preview
- RN QuickJS
- Goldie
- ContinuedTask

🍿 Read/subscribe: thisweekinreact.com/newsletter/296

✍️ @jwr.ski & I

Seb ⚛️ ThisWeekInReact.com

@sebastienlorber.com

💡 JSPI = JavaScript Promise Integration for WebAssembly

"Await for Wasm code"

Now in all browsers 🎉
Recently added to Safari and Firefox

Looks like an important primitive for native languages
C/C++/Rust, etc compiling to Wasm

September 16, 2026 at 10:58 AM

Seb ⚛️ ThisWeekInReact.com

@sebastienlorber.com

💡 OpaqueRange is nice

This inspired me this universal syntax highlighter that works with a gpu model to highlight a

<br><br>The fun part is that you can mix multiple languages within the same <textarea> 🤪<br><br><a href="https://github.com/slorber/gpu-lexer-textarea" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">github.com/slorber/gpu-...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link relative">
              <video playsinline autoplay muted preload="metadata" poster="https://video.bsky.app/watch/did%3Aplc%3Ahxmev3uady7j4litwnr5fzbg/bafkreidfpr4fnuf3wmql4wly4bfcwj6bsjckzdplue6jcncrzoe2cnhzry/thumbnail.jpg" class="w-full sm:w-full rounded inline-video no-card-link relative z-10" data-controller="inline-video" data-inline-video-hls-value="https://video.bsky.app/watch/did%3Aplc%3Ahxmev3uady7j4litwnr5fzbg/bafkreidfpr4fnuf3wmql4wly4bfcwj6bsjckzdplue6jcncrzoe2cnhzry/playlist.m3u8" data-action="click->inline-video#onVideoClick keydown->inline-video#onVideoKeydown" tabindex="0">
                <source src="https://video.bsky.app/watch/did%3Aplc%3Ahxmev3uady7j4litwnr5fzbg/bafkreidfpr4fnuf3wmql4wly4bfcwj6bsjckzdplue6jcncrzoe2cnhzry/playlist.m3u8" type="application/vnd.apple.mpegurl">
              </video>
            </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 15, 2026 at 3:37 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

This inspired me this universal syntax highlighter that works with a gpu model to highlight a <textarea>

The fun part is that you can mix multiple languages within the same <textarea> 🤪

github.com/slorber/gpu-..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">2</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvkxegaoes26"
                  data-bluesky-interactions-cid-param="bafyreibxor7agm5aozzboge4zvz37y3hd7xgdrnvhby3adk44hvjtem2iy"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">11</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mvkxegaoes26"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="💡 OpaqueRange is nice This inspired me this universal syntax highlighter that works with a gpu model to highlight a <textarea> The fun part…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="💡 OpaqueRange is nice

This inspired me this universal syntax highlighter that works with a gpu model to highlight a <textarea>

The fun part is that you can mix multiple languages within the same <textarea> 🤪

github.com/slorber/gpu-..."
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreigs7sg3qdixna5ur4sanghi5siuxw5x53v2kg3tzak37cmmjwska4" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreigs7sg3qdixna5ur4sanghi5siuxw5x53v2kg3tzak37cmmjwska4" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 15, 2026 at 2:32 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvktq674cc2a">
            You are absolutely right, Codex!
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvktq674cc2a"
                  data-bluesky-interactions-reply-cid-param="bafyreibbhe5o6mspz4taecdjw54apsdydcay4z63hkzpyzbmdd76dxh6za"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvktq674cc2a"
                  data-bluesky-interactions-reply-root-cid-param="bafyreibbhe5o6mspz4taecdjw54apsdydcay4z63hkzpyzbmdd76dxh6za"
                  data-bluesky-interactions-reply-author-name-param="Seb ⚛️ ThisWeekInReact.com"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq"
                  data-bluesky-interactions-post-path-param="/bsky/sebastienlorber.com/post/3mvktq674cc2a"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvktq674cc2a"
               data-bluesky-repost-menu-cid-value="bafyreibbhe5o6mspz4taecdjw54apsdydcay4z63hkzpyzbmdd76dxh6za"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="sebastienlorber.com"
               data-bluesky-repost-menu-post-text-value="You are absolutely right, Codex!"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvktq674cc2a"
                  data-bluesky-interactions-cid-param="bafyreibbhe5o6mspz4taecdjw54apsdydcay4z63hkzpyzbmdd76dxh6za"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">6</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mvktq674cc2a"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="You are absolutely right, Codex!"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="You are absolutely right, Codex!"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreih5dwz6hujsegebavzvizfj3atgpriyyikchyz5b2a7cfzk4fb7s4" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreih5dwz6hujsegebavzvizfj3atgpriyyikchyz5b2a7cfzk4fb7s4" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 14, 2026 at 3:55 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

The React version upgrade was recently merged into main

The 0.88 branch is already cut, RC.0 already released

The commit was cherry-picked so it should still be included 👍"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvihuksxzk2e"
                  data-bluesky-interactions-cid-param="bafyreibr4bqkb6o57jfxc7eua5mdwbj4lxxroozvhkfdae7zbcbvlrp5p4"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">3</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mvihuksxzk2e"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 React Native 0.88 + React 19.3 🎉 The React version upgrade was recently merged into main The 0.88 branch is already cut, RC.0 already rele…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 React Native 0.88 + React 19.3 🎉

The React version upgrade was recently merged into main

The 0.88 branch is already cut, RC.0 already released

The commit was cherry-picked so it should still be included 👍"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mvih5b4v4c27" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">👀 React DevTools v8.0<br><br>Now available on Chrome Web Store<br><br><a href="https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">chromewebstore.google.com/detail/react...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
                <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreia5psdhet227x4nf2vlsi2qulo5uodehjjuwjzwvycjbq755my36i" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreia5psdhet227x4nf2vlsi2qulo5uodehjjuwjzwvycjbq755my36i" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
              <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
                <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
                <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                  <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                  <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                  </button>
                </div>
              </div>
            </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 14, 2026 at 3:42 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

Now available on Chrome Web Store

chromewebstore.google.com/detail/react..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvih5b4v4c27"
                  data-bluesky-interactions-cid-param="bafyreid7edpzv2fhcx6wwh37xarp3exdylq65t5t47rktkwzdsyfda7cs4"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">11</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mvih5b4v4c27"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 React DevTools v8.0 Now available on Chrome Web Store chromewebstore.google.com/detail/react..."
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 React DevTools v8.0

Now available on Chrome Web Store

chromewebstore.google.com/detail/react..."
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 14, 2026 at 3:21 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

- Object.groupBy() / Map.groupBy()
- Promise.withResolvers()
- Element.checkVisibility()
- ArrayBuffer.transfer()

Available in all browsers since March 2024"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">1</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvifyndack2b"
                  data-bluesky-interactions-cid-param="bafyreifb37hwzzxk4gpjbkpiyyxndwawxb4sob4we77npwdugnyhs5yyui"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">28</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mvifyndack2b"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 These JS features -> now Baseline Widely Available: - Object.groupBy() / Map.groupBy() - Promise.withResolvers() - Element.checkVisibility…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 These JS features -> now Baseline Widely Available:

- Object.groupBy() / Map.groupBy()
- Promise.withResolvers()
- Element.checkVisibility()
- ArrayBuffer.transfer()

Available in all browsers since March 2024"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
                <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreiabruoyjwgjofo2tokalv5mgyb3q2n2g26xanqzakqaumklrmzbly" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreiabruoyjwgjofo2tokalv5mgyb3q2n2g26xanqzakqaumklrmzbly" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
              <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
                <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
                <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                  <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                  <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                  </button>
                </div>
              </div>
            </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 13, 2026 at 11:58 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvfk62o7zk2c">
            
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvfk62o7zk2c"
                  data-bluesky-interactions-reply-cid-param="bafyreifb25c26vktvtokialemnemoh2mrwwxdrztbhywz2cm2c5xiwm5aq"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvfk62o7zk2c"
                  data-bluesky-interactions-reply-root-cid-param="bafyreifb25c26vktvtokialemnemoh2mrwwxdrztbhywz2cm2c5xiwm5aq"
                  data-bluesky-interactions-reply-author-name-param="Seb ⚛️ ThisWeekInReact.com"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq"
                  data-bluesky-interactions-post-path-param="/bsky/sebastienlorber.com/post/3mvfk62o7zk2c"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            <span data-bluesky-interactions-target="replyCount">1</span>
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvfk62o7zk2c"
               data-bluesky-repost-menu-cid-value="bafyreifb25c26vktvtokialemnemoh2mrwwxdrztbhywz2cm2c5xiwm5aq"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="sebastienlorber.com"
               data-bluesky-repost-menu-post-text-value=""
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvfk62o7zk2c"
                  data-bluesky-interactions-cid-param="bafyreifb25c26vktvtokialemnemoh2mrwwxdrztbhywz2cm2c5xiwm5aq"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">5</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mvfk62o7zk2c"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value=""
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value=""
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mvab4u3fms2t" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">IMHO this choice is questionable, we'll see soon 🤪<br><br>Worth reading why RN remains relevant here:<br><a href="https://x.com/aleqsio/status/2098103071259668557" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">x.com/aleqsio/stat...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
                <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreidmpoxvmykvyzvxquqvo6vow4orbtpmt6sfejrwrlef7qaei5mhfq" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreidmpoxvmykvyzvxquqvo6vow4orbtpmt6sfejrwrlef7qaei5mhfq" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
              <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
                <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
                <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                  <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                  <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                  </button>
                </div>
              </div>
            </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 11, 2026 at 9:33 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

Worth reading why RN remains relevant here:
x.com/aleqsio/stat..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">1</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvab4u3fms2t"
                  data-bluesky-interactions-cid-param="bafyreigryo6enzj4nhslu5gva26sufx73dd76js6y7s32oodi2zpza43pa"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">12</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mvab4u3fms2t"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="IMHO this choice is questionable, we'll see soon 🤪 Worth reading why RN remains relevant here: x.com/aleqsio/stat..."
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="IMHO this choice is questionable, we'll see soon 🤪

Worth reading why RN remains relevant here:
x.com/aleqsio/stat..."
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mvab2plhzk2t" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">👀 Shopify is migrating from React Native back to native<br><br><a href="https://shopify.engineering/back-to-native" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">shopify.engineering/back-to-native</a></div>

<a href="https://shopify.engineering/back-to-native" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link">
            <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreiaeijb35s6vviopex7xhsgtfblu5gqi6rxnthna7m4v5v6ntwvbdi" class="w-full h-40 object-cover" loading="lazy">
          <div class="p-2">
            <div class="text-sm font-semibold truncate">Native is now the future of mobile at Shopify (2026) - Shopify</div>
            <div class="text-xs text-gray-500 truncate">Coding agents changed what it costs to build mobile apps twice. Here’s why Shopify is moving from React Native back to Swift and Kotlin.</div>
          </div>
          <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg>
            <span class="truncate">shopify.engineering</span>
          </div>
        </a>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 11, 2026 at 9:31 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

shopify.engineering/back-to-native"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mvab2plhzk2t"
                  data-bluesky-interactions-cid-param="bafyreicqu4sswoyx5gg2glnjbsmtkgfemb5p5winzp2rrnt7wz44l6df7m"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">6</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mvab2plhzk2t"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 Shopify is migrating from React Native back to native shopify.engineering/back-to-native"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 Shopify is migrating from React Native back to native

shopify.engineering/back-to-native"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mv4ayun75s2p" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
    <div class="mb-1 sm:mb-2 ml-6 text-sm font-semibold text-gray-500 flex items-center gap-1">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
      <span>Reposted by Seb ⚛️ ThisWeekInReact.com</span>
    </div>
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">This Week In React 296<br>⚛️ <br>- React 19.3<br>- DevTools<br>- Next.js chunking<br>- cn<br>- 3D Maps<br>- Effective-RSC<br>- Vidact<br>- Unified Flow<br>📱<br>- 0.88 RC<br>- Expo Modules v2 preview<br>- RN QuickJS<br>- Goldie<br>- ContinuedTask<br><br>🍿 Read/subscribe: <a href="https://thisweekinreact.com/newsletter/296" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">thisweekinreact.com/newsletter/296</a><br><br>✍️ <a href="https://bsky.app/profile/did:plc:zwplkyymvgbblvjjh6jhoxbt" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@jwr.ski</a> & I</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreihczqblnxmo4ehwouovblpz32rsplh7e4o4koptiuevcc5kd5emd4" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreihczqblnxmo4ehwouovblpz32rsplh7e4o4koptiuevcc5kd5emd4" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 9, 2026 at 7:20 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

🍿 Read/subscribe: thisweekinreact.com/newsletter/296

✍️ @jwr.ski & I"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">4</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv4ayun75s2p"
                  data-bluesky-interactions-cid-param="bafyreicqlayts677fgn4ijzzcv7smldstjmsqpcwtb6qpsp46qobpgvjrq"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">12</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mv4ayun75s2p"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="This Week In React 296 ⚛️ - React 19.3 - DevTools - Next.js chunking - cn - 3D Maps - Effective-RSC - Vidact - Unified Flow 📱 - 0.88 RC - Ex…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="This Week In React 296
⚛️ 
- React 19.3
- DevTools
- Next.js chunking
- cn
- 3D Maps
- Effective-RSC
- Vidact
- Unified Flow
📱
- 0.88 RC
- Expo Modules v2 preview
- RN QuickJS
- Goldie
- ContinuedTask

🍿 Read/subscribe: thisweekinreact.com/newsletter/296

✍️ @jwr.ski & I"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/react.dev/post/3mv4b27dfvs24" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
    <div class="mb-1 sm:mb-2 ml-6 text-sm font-semibold text-gray-500 flex items-center gap-1">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
      <span>Reposted by Seb ⚛️ ThisWeekInReact.com</span>
    </div>
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=react.dev" class="no-card-link inline-block flex-shrink-0" aria-label="React" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uorpbnp2q32vuvyeruwauyhe/bafkreibvieudczvr7oviy3mrrcq6fy2dpur2s4laz6iklwwtmhz4a7wcwy" alt="react.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=react.dev" class="truncate hover:underline text-black no-card-link">React</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=react.dev" class="hover:underline text-gray-500 no-card-link">@react.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">React 19.3 is now available!<br><br>This release makes View Transitions and Fragment Refs stable, and adds browser(), Trusted Types support, and Context in Server Components.<br><br><a href="https://react.dev/blog/2026/09/09/react-19-3" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">react.dev/blog/2026/09...</a></div>

<a href="https://react.dev/blog/2026/09/09/react-19-3" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link">
            <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uorpbnp2q32vuvyeruwauyhe/bafkreicgrrbn3ms6yae7cqnfwrbxojl5752ug2tgtyon2cfomlmnbirsoi" class="w-full h-40 object-cover" loading="lazy">
          <div class="p-2">
            <div class="text-sm font-semibold truncate">React 19.3 – React</div>
            <div class="text-xs text-gray-500 truncate">The library for web and native user interfaces</div>
          </div>
          <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg>
            <span class="truncate">react.dev</span>
          </div>
        </a>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 9, 2026 at 7:21 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

This release makes View Transitions and Fragment Refs stable, and adds browser(), Trusted Types support, and Context in Server Components.

react.dev/blog/2026/09..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">27</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uorpbnp2q32vuvyeruwauyhe/app.bsky.feed.post/3mv4b27dfvs24"
                  data-bluesky-interactions-cid-param="bafyreigom6zh6d4qnixx7zupftj5u7i3liptrbgmzouetr5qqlpmntyrae"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">130</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/react.dev/post/3mv4b27dfvs24"
                  data-share-title-value="React on LightNews"
                  data-share-text-value="React 19.3 is now available! This release makes View Transitions and Fragment Refs stable, and adds browser(), Trusted Types support, and Co…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="React 19.3 is now available!

This release makes View Transitions and Fragment Refs stable, and adds browser(), Trusted Types support, and Context in Server Components.

react.dev/blog/2026/09..."
               data-bluesky-options-author-handle-value="react.dev"
               data-bluesky-options-author-did-value="did:plc:uorpbnp2q32vuvyeruwauyhe"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<span class="flex items-center min-w-0 truncate">
          <a href="/author?bsky_handle=react.dev" class="font-semibold text-black hover:underline truncate no-card-link">React</a>
          <a href="/author?bsky_handle=react.dev" class="text-gray-500 ml-1 truncate hover:underline no-card-link">@react.dev</a>
      </span>
          <span class="text-gray-500 ml-1 shrink-0">· 7d</span>
    </div>

<div class="mt-1 text-[15px] leading-5 break-words text-gray-800">
      React 19.3 is now available!<br><br>This release makes View Transitions and Fragment Refs stable, and adds browser(), Trusted Types support, and Context in Server Components.<br><br><a href="https://react.dev/blog/2026/09/09/react-19-3" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">react.dev/blog/2026/09...</a>
    </div>

<a href="https://react.dev/blog/2026/09/09/react-19-3" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden no-card-link">
          <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uorpbnp2q32vuvyeruwauyhe/bafkreicgrrbn3ms6yae7cqnfwrbxojl5752ug2tgtyon2cfomlmnbirsoi" class="w-full h-40 object-cover" loading="lazy">
        <div class="p-2">
          <div class="text-sm font-semibold truncate">React 19.3 – React</div>
          <div class="text-xs text-gray-500 truncate">The library for web and native user interfaces</div>
        </div>
        <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg>
          <span class="truncate">react.dev</span>
        </div>
      </a>
  </div>
</div>

</div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 9, 2026 at 7:22 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv4b52n33227">
            It's here!!!
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv4b52n33227"
                  data-bluesky-interactions-reply-cid-param="bafyreigx37z6r4jvgmf3wtkbb4ftjcez7m2fcdqeswwtoakcdx6odzi4cu"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv4b52n33227"
                  data-bluesky-interactions-reply-root-cid-param="bafyreigx37z6r4jvgmf3wtkbb4ftjcez7m2fcdqeswwtoakcdx6odzi4cu"
                  data-bluesky-interactions-reply-author-name-param="Seb ⚛️ ThisWeekInReact.com"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq"
                  data-bluesky-interactions-post-path-param="/bsky/sebastienlorber.com/post/3mv4b52n33227"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            <span data-bluesky-interactions-target="replyCount">1</span>
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv4b52n33227"
               data-bluesky-repost-menu-cid-value="bafyreigx37z6r4jvgmf3wtkbb4ftjcez7m2fcdqeswwtoakcdx6odzi4cu"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="sebastienlorber.com"
               data-bluesky-repost-menu-post-text-value="It's here!!!"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv4b52n33227"
                  data-bluesky-interactions-cid-param="bafyreigx37z6r4jvgmf3wtkbb4ftjcez7m2fcdqeswwtoakcdx6odzi4cu"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">11</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mv4b52n33227"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="It's here!!!"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="It's here!!!"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mv4ayun75s2p" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">This Week In React 296<br>⚛️ <br>- React 19.3<br>- DevTools<br>- Next.js chunking<br>- cn<br>- 3D Maps<br>- Effective-RSC<br>- Vidact<br>- Unified Flow<br>📱<br>- 0.88 RC<br>- Expo Modules v2 preview<br>- RN QuickJS<br>- Goldie<br>- ContinuedTask<br><br>🍿 Read/subscribe: <a href="https://thisweekinreact.com/newsletter/296" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">thisweekinreact.com/newsletter/296</a><br><br>✍️ <a href="https://bsky.app/profile/did:plc:zwplkyymvgbblvjjh6jhoxbt" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@jwr.ski</a> & I</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreihczqblnxmo4ehwouovblpz32rsplh7e4o4koptiuevcc5kd5emd4" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreihczqblnxmo4ehwouovblpz32rsplh7e4o4koptiuevcc5kd5emd4" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

🍿 Read/subscribe: thisweekinreact.com/newsletter/296

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mv47pmwgfc2z" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">🚨 React v19.3 is out!<br><br>TLDR:<br>- <ViewTransition> → stable<br>- Fragment Refs → stable<br>- use(browser()) to opt out of SSR<br>- RSCs can render <Context>, no <Provider> wrapper needed<br>- Trusted Types support, useful alongside CSP to prevent XSS <br><br>🔗 <a href="https://react.dev/blog/2026/09/09/react-19-3" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">react.dev/blog/2026/09...</a></div>

<a href="https://react.dev/blog/2026/09/09/react-19-3" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link">
            <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreicgrrbn3ms6yae7cqnfwrbxojl5752ug2tgtyon2cfomlmnbirsoi" class="w-full h-40 object-cover" loading="lazy">
          <div class="p-2">
            <div class="text-sm font-semibold truncate">React 19.3 – React</div>
            <div class="text-xs text-gray-500 truncate">The library for web and native user interfaces</div>
          </div>
          <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg>
            <span class="truncate">react.dev</span>
          </div>
        </a>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 9, 2026 at 6:57 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

TLDR:
- <ViewTransition> → stable
- Fragment Refs → stable
- use(browser()) to opt out of SSR
- RSCs can render <Context>, no <Provider> wrapper needed
- Trusted Types support, useful alongside CSP to prevent XSS

🔗 react.dev/blog/2026/09..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">2</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv47pmwgfc2z"
                  data-bluesky-interactions-cid-param="bafyreibg7at6vvqo7qwbpq5snwbmfudur2z6bgsxlibtdn55fb5kfjvvc4"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">27</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mv47pmwgfc2z"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="🚨 React v19.3 is out! TLDR: - <ViewTransition> → stable - Fragment Refs → stable - use(browser()) to opt out of SSR - RSCs can render <Conte…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="🚨 React v19.3 is out!

🔗 react.dev/blog/2026/09..."
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link relative">
              <video playsinline autoplay muted preload="metadata" poster="https://video.bsky.app/watch/did%3Aplc%3Ahxmev3uady7j4litwnr5fzbg/bafkreiblfpkfam3o6vc2s7doxu5paobsz5zjgw5xvtlgtafubrgu3okpf4/thumbnail.jpg" class="w-full sm:w-full rounded inline-video no-card-link relative z-10" data-controller="inline-video" data-inline-video-hls-value="https://video.bsky.app/watch/did%3Aplc%3Ahxmev3uady7j4litwnr5fzbg/bafkreiblfpkfam3o6vc2s7doxu5paobsz5zjgw5xvtlgtafubrgu3okpf4/playlist.m3u8" data-action="click->inline-video#onVideoClick keydown->inline-video#onVideoKeydown" tabindex="0">
                <source src="https://video.bsky.app/watch/did%3Aplc%3Ahxmev3uady7j4litwnr5fzbg/bafkreiblfpkfam3o6vc2s7doxu5paobsz5zjgw5xvtlgtafubrgu3okpf4/playlist.m3u8" type="application/vnd.apple.mpegurl">
              </video>
            </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 9, 2026 at 4:43 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv3ya5yri22g">
            Oups, forgot to post the demo video 😇
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv3ya5yri22g"
                  data-bluesky-interactions-reply-cid-param="bafyreigq4pe4zbsronisrfmposxpxczv6ypdhuhow5z75xzpc4tsrmdm7a"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv3ya5yri22g"
                  data-bluesky-interactions-reply-root-cid-param="bafyreigq4pe4zbsronisrfmposxpxczv6ypdhuhow5z75xzpc4tsrmdm7a"
                  data-bluesky-interactions-reply-author-name-param="Seb ⚛️ ThisWeekInReact.com"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq"
                  data-bluesky-interactions-post-path-param="/bsky/sebastienlorber.com/post/3mv3ya5yri22g"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv3ya5yri22g"
               data-bluesky-repost-menu-cid-value="bafyreigq4pe4zbsronisrfmposxpxczv6ypdhuhow5z75xzpc4tsrmdm7a"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="sebastienlorber.com"
               data-bluesky-repost-menu-post-text-value="Oups, forgot to post the demo video 😇"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv3ya5yri22g"
                  data-bluesky-interactions-cid-param="bafyreigq4pe4zbsronisrfmposxpxczv6ypdhuhow5z75xzpc4tsrmdm7a"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">1</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mv3ya5yri22g"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="Oups, forgot to post the demo video 😇"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Oups, forgot to post the demo video 😇"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mv3uwckzws2o" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">👀 React Google Maps 1.10<br><br>Completed its existing Google Maps 3D support with declarative components<br><br>GLB models, HTML markers, polylines, polygons, terrain flattening, and circular paths<br><br>The balloon is a 3D marker - animated GLB  model</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreigxgsagayoitrrizjuri6ucpzfylslzru43nwecmrjo7kwl7ee5ay" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreigxgsagayoitrrizjuri6ucpzfylslzru43nwecmrjo7kwl7ee5ay" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 9, 2026 at 3:44 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

Completed its existing Google Maps 3D support with declarative components

GLB models, HTML markers, polylines, polygons, terrain flattening, and circular paths

The balloon is a 3D marker - animated GLB  model"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">1</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv3uwckzws2o"
                  data-bluesky-interactions-cid-param="bafyreics6lgv7axs5uijldntpnwlo46xakwwzkrbgltxwjjbcuqa7zswma"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">4</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mv3uwckzws2o"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 React Google Maps 1.10 Completed its existing Google Maps 3D support with declarative components GLB models, HTML markers, polylines, poly…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 React Google Maps 1.10

Completed its existing Google Maps 3D support with declarative components

GLB models, HTML markers, polylines, polygons, terrain flattening, and circular paths

The balloon is a 3D marker - animated GLB  model"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mv3sdomsjk2r" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">👀 React DevTools v8 is coming<br><br>The changelog is already merged and gives a sneak peek. <br><br>⚠️ Not published yet on npm or extension stores.<br><br>I don't know you, but I feel like React 19.3 is coming 😇<br><br><a href="https://github.com/react/react/blob/main/packages/react-devtools/CHANGELOG.md#800" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">github.com/react/react/...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreigmdiuefwmzgwpkngfokmr5ae6r4namv2fykjdwdbynlyd7fzvvii" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreigmdiuefwmzgwpkngfokmr5ae6r4namv2fykjdwdbynlyd7fzvvii" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 9, 2026 at 2:57 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

The changelog is already merged and gives a sneak peek.

⚠️ Not published yet on npm or extension stores.

I don't know you, but I feel like React 19.3 is coming 😇

github.com/react/react/..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv3sdomsjk2r"
                  data-bluesky-interactions-cid-param="bafyreienptxufnh25cmt4qvfggaypyxzz2rwqkc5u6xb6m7u6omhkrho4m"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">10</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mv3sdomsjk2r"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 React DevTools v8 is coming The changelog is already merged and gives a sneak peek. ⚠️ Not published yet on npm or extension stores. I don…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 React DevTools v8 is coming

The changelog is already merged and gives a sneak peek.

⚠️ Not published yet on npm or extension stores.

I don't know you, but I feel like React 19.3 is coming 😇

github.com/react/react/..."
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mv3scgfbe22r" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">👀 react-devtools-cdt-mcp<br><br>The React team is experimenting with a new tool for agents to understand your app at runtime<br><br>This is not an MCP<br><br>This lets Chrome DevTools MCP discover/register/expose React-related tools<br><br>Looks like pkg is getting ready for its 1st npm publish<br><br><a href="https://github.com/react/react/tree/main/packages/react-devtools-cdt-mcp" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">github.com/react/react/...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreicqpnc65mmbujkfiex56bbeqspbwsqlgbom7hoigvl6cgjdoa4mzi" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreicqpnc65mmbujkfiex56bbeqspbwsqlgbom7hoigvl6cgjdoa4mzi" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

The React team is experimenting with a new tool for agents to understand your app at runtime

This is not an MCP

This lets Chrome DevTools MCP discover/register/expose React-related tools

Looks like pkg is getting ready for its 1st npm publish

github.com/react/react/..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mv3scgfbe22r"
                  data-bluesky-interactions-cid-param="bafyreien35bs2fe6yrfkfluoyssuhh7rxywiywz5uuqawnisulqabe35ta"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">5</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mv3scgfbe22r"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 react-devtools-cdt-mcp The React team is experimenting with a new tool for agents to understand your app at runtime This is not an MCP Thi…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 react-devtools-cdt-mcp

The React team is experimenting with a new tool for agents to understand your app at runtime

This is not an MCP

This lets Chrome DevTools MCP discover/register/expose React-related tools

Looks like pkg is getting ready for its 1st npm publish

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mulz5w4m322d" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">👀 React Native 1.0 - finally coming?<br><br>In our latest RN headline, we caught an important RFC and dozens of WIP PRs to clarify the public C++ API<br><br>This follows the "Stable API" work already done on JS/TS/Java/Kotlin<br><br>To me, this looks like one of the last remaining important pieces needed for 1.0</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
                <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig7zwf5hvyz4gho7qjqnaryyvunz5hgpwe7vr4fozosutunbwt424" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig7zwf5hvyz4gho7qjqnaryyvunz5hgpwe7vr4fozosutunbwt424" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
              <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
                <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
                <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                  <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                  <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                  </button>
                </div>
              </div>
            </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 3, 2026 at 8:17 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

In our latest RN headline, we caught an important RFC and dozens of WIP PRs to clarify the public C++ API

This follows the "Stable API" work already done on JS/TS/Java/Kotlin

To me, this looks like one of the last remaining important pieces needed for 1.0"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mulz5w4m322d"
                  data-bluesky-interactions-cid-param="bafyreighfp6ucmyeb5xulapmsnndmoeu64vcmoyzgcqgsmliw2i5qprcnq"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">10</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mulz5w4m322d"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 React Native 1.0 - finally coming? In our latest RN headline, we caught an important RFC and dozens of WIP PRs to clarify the public C++ A…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 React Native 1.0 - finally coming?

In our latest RN headline, we caught an important RFC and dozens of WIP PRs to clarify the public C++ API

This follows the "Stable API" work already done on JS/TS/Java/Kotlin

To me, this looks like one of the last remaining important pieces needed for 1.0"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
                <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreienrptcqxax3yprfjae3x53kwdsafm3hv3owmivbrbyyf52i6wssm" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreienrptcqxax3yprfjae3x53kwdsafm3hv3owmivbrbyyf52i6wssm" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
              <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
                <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
                <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                  <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                  <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                  </button>
                </div>
              </div>
            </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 3, 2026 at 8:13 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

Here's our latest headline to catch up"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">2</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mulyxna27c2d"
                  data-bluesky-interactions-cid-param="bafyreibqwy7jvz22valgatqyrdsdiacrup3olkgen6xjzl77slrgvf3r64"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">4</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mulyxna27c2d"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="You might have missed this, but on X everyone is talking about StyleX lately 👀 Here's our latest headline to catch up"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="You might have missed this, but on X everyone is talking about StyleX lately 👀

Here's our latest headline to catch up"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mukqztbye22q" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
    <div class="mb-1 sm:mb-2 ml-6 text-sm font-semibold text-gray-500 flex items-center gap-1">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
      <span>Reposted by Seb ⚛️ ThisWeekInReact.com</span>
    </div>
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">This Week In React 295<br><br>⚛️<br>- StyleX<br>- browser()<br>- Next.js<br>- Compiler in Vite/Bun<br>- Astryx<br>- Formisch<br>- React Aria<br>- TanStack<br>📱<br>- C++ API<br>- Margelo+Callstack<br>- Observe<br>- Reanimated<br>- Teleport<br>- Nitro<br>- Screen Transition<br><br>🍿 Read <a href="https://thisweekinreact.com/newsletter/295" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">thisweekinreact.com/newsletter/295</a><br><br>✍️ <a href="https://bsky.app/profile/did:plc:zwplkyymvgbblvjjh6jhoxbt" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@jwr.ski</a> & I</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreihczqblnxmo4ehwouovblpz32rsplh7e4o4koptiuevcc5kd5emd4" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreihczqblnxmo4ehwouovblpz32rsplh7e4o4koptiuevcc5kd5emd4" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 2, 2026 at 8:19 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

⚛️
- StyleX
- browser()
- Next.js
- Compiler in Vite/Bun
- Astryx
- Formisch
- React Aria
- TanStack
📱
- C++ API
- Margelo+Callstack
- Observe
- Reanimated
- Teleport
- Nitro
- Screen Transition

🍿 Read thisweekinreact.com/newsletter/295

✍️ @jwr.ski & I"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">5</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mukqztbye22q"
                  data-bluesky-interactions-cid-param="bafyreic7rllnq7r3yxchg43bd7s2fpviz2ijen3m62bp52joi3c6r5anwa"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">12</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mukqztbye22q"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="This Week In React 295 ⚛️ - StyleX - browser() - Next.js - Compiler in Vite/Bun - Astryx - Formisch - React Aria - TanStack 📱 - C++ API - Ma…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="This Week In React 295

🍿 Read thisweekinreact.com/newsletter/295

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mukqztbye22q" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">This Week In React 295<br><br>⚛️<br>- StyleX<br>- browser()<br>- Next.js<br>- Compiler in Vite/Bun<br>- Astryx<br>- Formisch<br>- React Aria<br>- TanStack<br>📱<br>- C++ API<br>- Margelo+Callstack<br>- Observe<br>- Reanimated<br>- Teleport<br>- Nitro<br>- Screen Transition<br><br>🍿 Read <a href="https://thisweekinreact.com/newsletter/295" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">thisweekinreact.com/newsletter/295</a><br><br>✍️ <a href="https://bsky.app/profile/did:plc:zwplkyymvgbblvjjh6jhoxbt" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@jwr.ski</a> & I</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreihczqblnxmo4ehwouovblpz32rsplh7e4o4koptiuevcc5kd5emd4" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreihczqblnxmo4ehwouovblpz32rsplh7e4o4koptiuevcc5kd5emd4" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

🍿 Read thisweekinreact.com/newsletter/295

✍️ @jwr.ski & I"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">5</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mukqztbye22q"
                  data-bluesky-interactions-cid-param="bafyreic7rllnq7r3yxchg43bd7s2fpviz2ijen3m62bp52joi3c6r5anwa"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">12</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mukqztbye22q"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="This Week In React 295 ⚛️ - StyleX - browser() - Next.js - Compiler in Vite/Bun - Astryx - Formisch - React Aria - TanStack 📱 - C++ API - Ma…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="This Week In React 295

🍿 Read thisweekinreact.com/newsletter/295

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3muk7eu23w22b" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">👀 Out-of-order streaming<br><br>Now in the HTML spec 🎉<br><a href="https://github.com/whatwg/html/pull/11818" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">github.com/whatwg/html/...</a><br><br>The "list" placeholder gets replaced by the template that appears later in the document.<br><br>Already in Chrome/Edge<br>Positive positions from other browsers<br><br>Maybe this can power React Suspense for SSR in the future? 👀</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
                <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreih2xgrygyaikctqv5b6h5ht6us72u5gzs7nvlsn422tnpre323yye" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreih2xgrygyaikctqv5b6h5ht6us72u5gzs7nvlsn422tnpre323yye" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
              <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
                <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
                <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                  <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                  <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                  </button>
                </div>
              </div>
            </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 2, 2026 at 3:03 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

Now in the HTML spec 🎉
github.com/whatwg/html/...

The "list" placeholder gets replaced by the template that appears later in the document.

Already in Chrome/Edge
Positive positions from other browsers

Maybe this can power React Suspense for SSR in the future? 👀"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">11</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3muk7eu23w22b"
                  data-bluesky-interactions-cid-param="bafyreiea46c4fprpwilphd2qtywr45dfzggshhjzdimmk4fijlh3tn6al4"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">50</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3muk7eu23w22b"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 Out-of-order streaming Now in the HTML spec 🎉 github.com/whatwg/html/... The "list" placeholder gets replaced by the template that appears…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 Out-of-order streaming

Now in the HTML spec 🎉
github.com/whatwg/html/...

The "list" placeholder gets replaced by the template that appears later in the document.

Already in Chrome/Edge
Positive positions from other browsers

Maybe this can power React Suspense for SSR in the future? 👀"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3mujmfbei4c2c" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">👀 React 19.3 - You can already sense what’s brewing<br><br>Just follow the types to get a sneak peek 🤪<br><br>Top 3 changes:<br>✅ <ViewTransiton> / addTransitionType stable<br>✅ Fragment ref stable <br>✅ React-DOM browser() API 🆕<br><br>ViewTransition + Fragment refs ➡️ designed to be cross-renderer</div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreia6vwyc5rr2qce22qyytsesb3sytzq3gmvvwkj7ldm3ejarbtgtiq" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreia6vwyc5rr2qce22qyytsesb3sytzq3gmvvwkj7ldm3ejarbtgtiq" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 2, 2026 at 9:23 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

Just follow the types to get a sneak peek 🤪

Top 3 changes:
✅ <ViewTransiton> / addTransitionType stable
✅ Fragment ref stable 
✅ React-DOM browser() API 🆕

ViewTransition + Fragment refs ➡️ designed to be cross-renderer"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">2</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3mujmfbei4c2c"
                  data-bluesky-interactions-cid-param="bafyreihgqu6qiha5y4m3fxveum7x5khnufpw6jwuzvctajpelmkhvorsri"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">20</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3mujmfbei4c2c"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="👀 React 19.3 - You can already sense what’s brewing Just follow the types to get a sneak peek 🤪 Top 3 changes: ✅ <ViewTransiton> / addTransi…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="👀 React 19.3 - You can already sense what’s brewing

Just follow the types to get a sneak peek 🤪

Top 3 changes:
✅ <ViewTransiton> / addTransitionType stable
✅ Fragment ref stable 
✅ React-DOM browser() API 🆕

ViewTransition + Fragment refs ➡️ designed to be cross-renderer"
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/sebastienlorber.com/post/3muhwonfvpk2k" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=sebastienlorber.com" class="no-card-link inline-block flex-shrink-0" aria-label="Seb ⚛️ ThisWeekInReact.com" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreig3rrp5wcp5suiu7xjpuesmzwvrd25wuxpkuztcdwtqdu3hqyojpq" alt="sebastienlorber.com" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=sebastienlorber.com" class="truncate hover:underline text-black no-card-link">Seb ⚛️ ThisWeekInReact.com</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=sebastienlorber.com" class="hover:underline text-gray-500 no-card-link">@sebastienlorber.com</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">One of the most exciting JS proposals now has a draft spec <br><br><a href="https://tc39.es/proposal-composites/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">tc39.es/proposal-com...</a><br><br>Aiming for stage 2 at the next TC39 meeting<br><br><a href="https://github.com/tc39/agendas/blob/main/2026/09.md" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">github.com/tc39/agendas...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreibimhyxhzuakfasvttmmw27ynh5lhel4wgkxjt4lsb5mdftfahdra" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:hxmev3uady7j4litwnr5fzbg/bafkreibimhyxhzuakfasvttmmw27ynh5lhel4wgkxjt4lsb5mdftfahdra" alt="" class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>September 1, 2026 at 5:22 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

tc39.es/proposal-com...

Aiming for stage 2 at the next TC39 meeting

github.com/tc39/agendas..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">7</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:hxmev3uady7j4litwnr5fzbg/app.bsky.feed.post/3muhwonfvpk2k"
                  data-bluesky-interactions-cid-param="bafyreiftqnuuphuvfjxlzis7z6zsgwuyqevnnmcx4pra7hfc3sne2czei4"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">67</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/sebastienlorber.com/post/3muhwonfvpk2k"
                  data-share-title-value="Seb ⚛️ ThisWeekInReact.com on LightNews"
                  data-share-text-value="One of the most exciting JS proposals now has a draft spec tc39.es/proposal-com... Aiming for stage 2 at the next TC39 meeting github.com/tc…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="One of the most exciting JS proposals now has a draft spec

tc39.es/proposal-com...

Aiming for stage 2 at the next TC39 meeting

github.com/tc39/agendas..."
               data-bluesky-options-author-handle-value="sebastienlorber.com"
               data-bluesky-options-author-did-value="did:plc:hxmev3uady7j4litwnr5fzbg"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

</div>
  </div>
</div>

</main>

</div>
      <div class="hidden md:block"></div>
    </div>
    
<div id="cta-footer" class="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-black border-t border-gray-200 dark:border-gray-700">
          <div class="px-2 pt-3 pb-5">
      <div class="flex items-center justify-between gap-3">
        
        <div class="flex items-center gap-2 flex-1 min-w-0">
          <a class="inline-flex items-center gap-2" aria-label="LightNews" data-apply-edition="1" href="/">
              <img alt="LightNews" class="logo-light h-12 w-12 flex-shrink-0" src="/assets/brands/lightnews/logo-light-333069a8.png" />
              <img alt="LightNews" class="logo-dark h-12 w-12 flex-shrink-0" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" />
            <span class="text-base font-semibold text-gray-900 dark:text-white truncate brand-text">LightNews</span>
</a>        </div>
        
        <div class="flex items-center gap-2 flex-shrink-0">
          <button type="button" data-action="click->auth-modal#openSignup" class="btn btn-primary btn-sm whitespace-nowrap">Create account</button>
          <button type="button" data-action="click->auth-modal#openSignin" class="btn btn-light btn-sm whitespace-nowrap">Sign in</button>
        </div>
      </div>
    </div>
</div>

<style>
  @media (max-width: 767px) {
    body {
      padding-bottom: 6.5rem;
    }
  }
  /* Hard guarantee: footer is visible on mobile widths */
  @media (max-width: 1023px) {
    #cta-footer { display: block !important; }
  }
</style>

<div id="signin-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-auth-modal-target="signinModal">
  <div class="flex min-h-screen items-center justify-center p-4">
    
    <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->auth-modal#close"></div>
    
    
    <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl">
      
      <button data-action="click->auth-modal#close" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

<div class="flex justify-center mb-6">
        <img alt="LightNews" class="logo-light h-12 w-12" src="/assets/brands/lightnews/logo-light-333069a8.png" />
        <img alt="LightNews" class="logo-dark h-12 w-12" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" />
      </div>

<h2 class="text-black dark:text-white text-3xl font-bold text-center mb-6">Sign in to LightNews</h2>

<div class="space-y-3 mb-6">
        
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/google/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
          </svg>
          Continue with Google
</a>
        
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/apple/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
          </svg>
          Continue with Apple
</a>
        
        <button type="button"
                class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600"
                data-action="click->auth-modal#close click->bluesky-auth#handleSignIn">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/>
          </svg>
          Continue with Bluesky
        </button>
      </div>

<div class="relative my-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="bg-white dark:bg-black px-3 text-sm text-gray-600 dark:text-gray-300">or</span>
        </div>
      </div>

<form class="space-y-4" action="/auth/email/signin" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="nFJ6hdGPbFMWDXM8EXJBDb0a9N-U-9JBzkQXSGbqHIlja5Cjh_1oakNhGnLwbyRfxvHOGTNdhjAdjDiVErFY_g" autocomplete="off" />
        <div>
          <label for="signin-email" class="block text-black dark:text-white font-semibold text-sm mb-2">Email address</label>
          <input
            type="email"
            name="email"
            id="signin-email"
            placeholder="name@domain.com"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div>
          <label for="signin-password" class="block text-black dark:text-white font-semibold text-sm mb-2">Password</label>
          <input
            type="password"
            name="password"
            id="signin-password"
            placeholder="Your password"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<button type="submit" class="w-full btn btn-primary py-3 font-semibold">
          Sign in
        </button>
</form>
      <div class="mt-3 text-center">
        <a class="text-sm text-blue-600 dark:text-blue-400 hover:underline" href="/auth/email/forgot_password">Forgot password?</a>
      </div>

<div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-400 mb-2">Don't have an account?</p>
        <button data-action="click->auth-modal#switchToSignup" class="text-blue-600 dark:text-white font-semibold underline hover:text-blue-500 transition-colors">
          Sign up for LightNews
        </button>
      </div>
    </div>
  </div>
</div>

<div id="signup-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-auth-modal-target="signupModal">
  <div class="flex min-h-screen items-center justify-center p-4">
    
    <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->auth-modal#close"></div>
    
    
    <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl">
      
      <button data-action="click->auth-modal#close" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

<h2 class="text-black dark:text-white text-3xl font-bold text-center mb-6">Sign up to start reading</h2>

<div class="space-y-3 mb-6">
        
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/google/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
          </svg>
          Sign up with Google
</a>
        
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/apple/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
          </svg>
          Sign up with Apple
</a>
        
        <button type="button"
                class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600"
                data-action="click->auth-modal#close click->bluesky-auth#handleCreateAccount">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/>
          </svg>
          Sign up with Bluesky
        </button>
      </div>

<form class="space-y-4" action="/auth/email/signup" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="ixcNRY9xW3FIEg3UO0CggIKCN9OMpTK0go5-6IP1ndhnloFG1Tnjw7dRuiSMKLAS7aF3bnKE-bN7KJUMXIUmJg" autocomplete="off" />
        <div>
          <label for="signup-name" class="block text-black dark:text-white font-semibold text-sm mb-2">Name</label>
          <input
            type="text"
            name="display_name"
            id="signup-name"
            placeholder="Your name"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div>
          <label for="signup-email" class="block text-black dark:text-white font-semibold text-sm mb-2">Email address</label>
          <input
            type="email"
            name="email"
            id="signup-email"
            placeholder="name@domain.com"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div>
          <label for="signup-password" class="block text-black dark:text-white font-semibold text-sm mb-2">Password</label>
          <input
            type="password"
            name="password"
            id="signup-password"
            placeholder="At least 8 characters"
            minlength="8"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div>
          <label for="signup-password-confirmation" class="block text-black dark:text-white font-semibold text-sm mb-2">Confirm password</label>
          <input
            type="password"
            name="password_confirmation"
            id="signup-password-confirmation"
            placeholder="Repeat your password"
            minlength="8"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<button type="submit" class="w-full btn btn-primary py-3 font-semibold">
          Create account
        </button>
</form>
      
      <div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-400 mb-2">Already have an account?</p>
        <button data-action="click->auth-modal#switchToSignin" class="text-blue-600 dark:text-white font-semibold underline hover:text-blue-500 transition-colors">
          Sign in
        </button>
      </div>
    </div>
  </div>
</div>

<div data-controller="modal" data-reply-modal="true" id="global-reply-modal"
     data-viewer-avatar-url=""
     data-viewer-display-name="">
  <div class="hidden fixed inset-0 z-50 overflow-y-auto" data-modal-target="panel" data-viewer-avatar-url="" data-viewer-display-name="">
    <div class="flex min-h-screen items-start justify-center pt-4 md:pt-20">
      
      <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->modal#close"></div>

<div class="relative bg-[#1e3a5f] rounded-2xl w-full max-w-xl mx-4 shadow-2xl" data-action="click->modal#stop">
        
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-600">
          <button type="button" class="text-blue-400 text-base font-medium" data-action="click->modal#close">Cancel</button>
          <button type="button" 
                  id="modal-reply-submit"
                  class="px-5 py-1.5 bg-blue-600 text-white rounded-full font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
            Reply
          </button>
        </div>

<div class="px-4 py-3 border-b border-gray-600 modal-reply-preview">
          <div class="flex items-start gap-3">
            <img src="" alt="" class="modal-reply-author-avatar w-10 h-10 rounded-full flex-shrink-0 hidden">
            <div class="modal-reply-author-avatar-placeholder w-10 h-10 rounded-full bg-gray-300 flex-shrink-0"></div>
            <div class="flex-1 min-w-0">
              <div class="font-semibold text-white text-base modal-reply-author-name"> </div>
              <div class="text-gray-300 text-sm line-clamp-3 modal-reply-post-text"> </div>
            </div>
          </div>
        </div>

<div class="px-4 py-3">
          <div class="flex items-start gap-3">
            <img src="" alt="You" class="modal-viewer-avatar w-10 h-10 rounded-full flex-shrink-0 hidden">
            <div class="modal-viewer-avatar-placeholder w-10 h-10 rounded-full bg-gray-300 flex-shrink-0 "></div>
            <div class="flex-1 min-w-0">
              <textarea 
                id="modal-reply-text"
                placeholder="Write your reply"
                rows="8"
                maxlength="300"
                class="w-full px-0 py-2 bg-transparent text-white text-base placeholder-gray-400 resize-none focus:outline-none border-0"
                data-reply-uri=""
                data-reply-cid=""
                data-root-uri=""
                data-root-cid=""
                data-mode="reply"
                data-embed=""
              >

English

Add to Home Screen

News, ranked by scholars

Connect Bluesky

Connect with Bluesky