feat: implement Figma availability check and improve layout readiness logic

Author: Justineo

packages/extension/components/Panel.vue

@@ -128,7 +128,7 @@ const restrictedPosition = computed(() => {
   }
 
   const panelPixelWidth = panelWidth.value
-  const { offsetHeight: headerHeight } = header.value
+  const headerHeight = header.value.offsetHeight - 1
 
   const xMin = -panelPixelWidth / 2
   const xMax = windowWidth.value - panelPixelWidth / 2

packages/extension/composables/availability.ts

@@ -0,0 +1,84 @@
+import { useDocumentVisibility, useIntervalFn } from '@vueuse/core'
+import waitFor from 'p-wait-for'
+import { computed, watch } from 'vue'
+
+import { layoutReady, runtimeMode } from '@/ui/state'
+import { getCanvas, getLeftPanel } from '@/utils'
+import { logger } from '@/utils/log'
+
+const LAYOUT_CHECK_INTERVAL = 500
+const FIGMA_READY_TIMEOUT = 1000
+const FIGMA_RECOVER_INTERVAL = 3000
+
+function isLayoutReady() {
+  return getCanvas() != null && getLeftPanel() != null
+}
+
+export function useFigmaAvailability() {
+  const visibility = useDocumentVisibility()
+  const canCheck = computed(() => layoutReady.value && visibility.value === 'visible')
+  const isFigmaReady = () => window.figma?.currentPage != null
+  let checkToken = 0
+
+  const setMode = (mode: 'standard' | 'unavailable') => {
+    const modeChanged = runtimeMode.value !== mode
+    runtimeMode.value = mode
+    if (!modeChanged) return
+    if (mode === 'standard') {
+      logger.log('`window.figma` is now available. TemPad Dev is ready.')
+    } else {
+      logger.log('`window.figma` is not available. TemPad Dev is currently unavailable.')
+    }
+  }
+
+  useIntervalFn(
+    () => {
+      const ready = isLayoutReady()
+      if (ready !== layoutReady.value) {
+        layoutReady.value = ready
+      }
+    },
+    LAYOUT_CHECK_INTERVAL,
+    { immediate: true }
+  )
+
+  const { pause: stopRecover, resume: startRecover } = useIntervalFn(
+    () => {
+      if (!canCheck.value) {
+        stopRecover()
+        return
+      }
+      const ok = isFigmaReady()
+      setMode(ok ? 'standard' : 'unavailable')
+      if (ok) stopRecover()
+    },
+    FIGMA_RECOVER_INTERVAL,
+    { immediate: false }
+  )
+
+  const runCheck = async () => {
+    const token = (checkToken += 1)
+    if (!canCheck.value) return
+    const ok = await waitFor(isFigmaReady, { timeout: FIGMA_READY_TIMEOUT }).then(
+      () => true,
+      () => false
+    )
+    if (token !== checkToken || !canCheck.value) return
+    setMode(ok ? 'standard' : 'unavailable')
+    if (ok) stopRecover()
+    else startRecover()
+  }
+
+  watch(
+    canCheck,
+    (ready) => {
+      if (!ready) {
+        checkToken += 1
+        stopRecover()
+        return
+      }
+      void runCheck()
+    },
+    { immediate: true }
+  )
+}

packages/extension/composables/index.ts

@@ -1,6 +1,7 @@
 export * from './copy'
 export * from './deep-link'
 export * from './dev-resources'
+export * from './availability'
 export * from './input'
 export * from './key-lock'
 export * from './mcp'

packages/extension/entrypoints/ui/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useIdle, useIntervalFn, useTimeoutFn } from '@vueuse/core'
-import waitFor from 'p-wait-for'
 
 import Badge from '@/components/Badge.vue'
 import IconButton from '@/components/IconButton.vue'
@@ -12,36 +11,22 @@ import CodeSection from '@/components/sections/CodeSection.vue'
 import ErrorSection from '@/components/sections/ErrorSection.vue'
 import MetaSection from '@/components/sections/MetaSection.vue'
 import PrefSection from '@/components/sections/PrefSection.vue'
-import { syncSelection, useKeyLock, useSelection } from '@/composables'
-import { useMcp } from '@/composables'
+import {
+  syncSelection,
+  useFigmaAvailability,
+  useKeyLock,
+  useMcp,
+  useSelection
+} from '@/composables'
 import { layoutReady, options, runtimeMode, selection } from '@/ui/state'
-import { getCanvas, getLeftPanel } from '@/utils'
+import { getCanvas } from '@/utils'
 
 useSelection()
 useKeyLock()
 
-const LAYOUT_CHECK_INTERVAL = 500
+const HINT_CHECK_INTERVAL = 500
 
-function isLayoutReady() {
-  return getCanvas() != null && getLeftPanel() != null
-}
-
-useIntervalFn(
-  () => {
-    const ready = isLayoutReady()
-    if (ready !== layoutReady.value) {
-      layoutReady.value = ready
-    }
-  },
-  LAYOUT_CHECK_INTERVAL,
-  { immediate: true }
-)
-
-onMounted(() => {
-  waitFor(isLayoutReady).then(() => {
-    layoutReady.value = true
-  })
-})
+useFigmaAvailability()
 
 const HINT_IDLE_MS = 10000
 
@@ -120,7 +105,7 @@ function updateHintOverlap() {
   lowVisibility.value = overlapWidth < panelRect.width / 3
 }
 
-useIntervalFn(updateHintOverlap, LAYOUT_CHECK_INTERVAL, { immediate: true })
+useIntervalFn(updateHintOverlap, HINT_CHECK_INTERVAL, { immediate: true })
 
 useTimeoutFn(() => {
   initialLock.value = false
@@ -147,6 +132,7 @@ function activateMcp() {
 
 <template>
   <Panel
+    v-show="layoutReady"
     class="tp-main"
     :class="{ 'tp-main-minimized': options.minimized, 'tp-main-hint': showHint }"
   >
@@ -193,6 +179,7 @@ function activateMcp() {
 
 <style scoped>
 .tp-main {
+  overflow: hidden;
   transition:
     height 0.2s cubic-bezier(0.87, 0, 0.13, 1),
     box-shadow 0.2s cubic-bezier(0.87, 0, 0.13, 1);

packages/extension/entrypoints/ui/index.ts

@@ -1,80 +1,10 @@
 import 'overlayscrollbars/styles/overlayscrollbars.css'
-import waitFor from 'p-wait-for'
-
-import { runtimeMode } from '@/ui/state'
-import { logger } from '@/utils/log'
 
 import './style.css'
 
 export default defineUnlistedScript(async () => {
   import('./prism')
 
-  const FIGMA_READY_TIMEOUT = 1000
-  const FIGMA_RECOVER_INTERVAL = 3000
-
-  let announcedUnavailable = false
-
-  const announceUnavailable = () => {
-    if (announcedUnavailable) return
-    if (document.visibilityState === 'hidden') return
-    runtimeMode.value = 'unavailable'
-    announcedUnavailable = true
-    logger.log('`window.figma` is not available. TemPad Dev is currently unavailable.')
-  }
-
-  async function ensureFigmaReady(timeout?: number): Promise<boolean> {
-    try {
-      await waitFor(() => window.figma?.currentPage != null, timeout ? { timeout } : undefined)
-      return true
-    } catch {
-      return false
-    }
-  }
-
-  const ready = await ensureFigmaReady(FIGMA_READY_TIMEOUT)
-  if (!ready) {
-    announceUnavailable()
-    const panelEl = () => document.getElementById('tempad')
-
-    const tryRecover = async () => {
-      const el = panelEl()
-      const available = await ensureFigmaReady()
-      if (available) {
-        runtimeMode.value = 'standard'
-        if (el) el.style.display = ''
-        logger.log('`window.figma` is now available. TemPad Dev is ready.')
-        return true
-      }
-      if (el && document.visibilityState === 'hidden') el.style.display = 'none'
-      else announceUnavailable()
-      return false
-    }
-
-    const recovery = window.setInterval(async () => {
-      const ok = await tryRecover()
-      if (ok) clearInterval(recovery)
-    }, FIGMA_RECOVER_INTERVAL)
-
-    const handleVisibility = async () => {
-      const el = panelEl()
-      if (!el) return
-      if (document.visibilityState === 'hidden') {
-        if (runtimeMode.value === 'unavailable') el.style.display = 'none'
-        return
-      }
-      el.style.display = ''
-      const ok = await tryRecover()
-      if (!ok) announceUnavailable()
-    }
-
-    const handleFocus = async () => {
-      await tryRecover()
-    }
-
-    document.addEventListener('visibilitychange', handleVisibility)
-    window.addEventListener('focus', handleFocus)
-  }
-
   const App = (await import('./App.vue')).default
 
   createApp(App).mount('tempad')

packages/extension/entrypoints/ui/style.css

@@ -125,11 +125,6 @@ tempad input[type="number"]:focus-visible {
   outline: unset;
 }
 
-#react-page:not(:has(#fullscreen-root .gpu-view-content canvas):has(#left-panel-container))
-  ~ tempad {
-  display: none;
-}
-
 .os-scrollbar {
   --os-track-bg-hover: var(--color-scrollbartrackhover);
   --os-track-bg-active: var(--color-scrollbartrackdrag);

packages/extension/utils/figma.ts

@@ -2,10 +2,13 @@ export function getCanvas() {
   // Need to ensure the whole plugin is rendered after canvas is ready
   // so that we can cast the result to HTMLElement here.
   // The layout readiness check lives in App.vue.
-  return document.querySelector('#fullscreen-root .gpu-view-content canvas') as HTMLElement
+  return document.querySelector<HTMLElement>('#fullscreen-root .gpu-view-content canvas')
 }
 
 export function getLeftPanel() {
   // Similar to `getCanvas()`.
-  return document.querySelector('#left-panel-container') as HTMLElement
+  return (
+    document.querySelector<HTMLElement>('#left-panel-container') ||
+    document.querySelector<HTMLElement>('[class*="left_panel_island_container"]')
+  )
 }