Copilot Instructions for UnoCSS Inspector

You are working on a Vue 3 + TypeScript project for a UnoCSS Inspector tool. This tool helps developers inspect and analyze UnoCSS classes and styles on web elements.

Key Technologies

• Vue 3 with Composition API
• TypeScript
• UnoCSS
• VueUse utilities
• Vite

Start project with script

We use pnpm manage packages.

• play: start playground with hot-reloading
• play:build: build the project for production

As a npm package, you can also use the following scripts:

• dev: build the npm package with dev mode
• build: build the npm package

Code Patterns to Follow

Use Composition API with <script setup>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useElement } from '../composables/element'

// Use the inject pattern for shared state
const { element, tracking } = useElement()

const someComputed = computed(() => {
  // Always trigger reactivity with element props
  tracking()

  if (!element.value)
    return null

  return 'some value'
  // Process element...
})
</script>

And if the element is updated, the computed property will automatically re-evaluate with triggering

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useElement } from '../composables/element'

// Use the inject pattern for shared state
const { element, tracking, triggering } = useElement()

const someComputed = computed({
  get: () => {
    // Always trigger reactivity with element props
    tracking()

    if (!element.value)
      return null

    return 'some value'
    // Process element...
  },
  set: (val) => {
    // do something with val

    // Finally, if you want change the element's state
    triggering()
  }
})
</script>

Provide/Inject Pattern

The project uses provide/inject for state management:

• provideCurrentElement() in Inspector.vue provides the current element
• useElement() composable injects the element, styles, tracking and triggering
• Avoid prop drilling - use injection instead

Component Props

Always use TypeScript interfaces for props:

interface Props {
  isSelected: boolean
  action: {
    start: () => void
    stop: () => void
  }
}

const props = defineProps<Props>()

DOM Operations

When working with DOM elements:

• Always check if element exists before accessing properties
• Use getBoundingClientRect() for positioning
• Use window.getComputedStyle() for style information
• Handle edge cases (null elements, invalid styles)

Reactive Updates

• Use triggering() to force reactive updates when DOM changes
• Watch for window resize and scroll events
• Clean up event listeners in onUnmounted()

CSS Styling

• Use scoped styles with CSS custom properties
• Follow the existing color scheme (margin, padding, content, border colors)
• Use CSS Grid/Flexbox for layouts
• Implement smooth transitions and animations

Error Handling

• Always validate injected dependencies
• Provide fallback values for computeds
• Handle cases where DOM elements might not exist
• Use optional chaining for object property access

Project-Specific Patterns

Element Inspection

When creating components that display element information:

1. Use useElement() to get current element
2. Create computed properties that react to updateTrigger
3. Return null/empty state when no element is available
4. Format values appropriately (round numbers, add units)

Box Model Display

For box model related features:

• Extract margin, padding, border values from computedStyle
• Handle cases where values might be 'auto' or invalid
• Display values in a consistent format (px units, rounded)
• Use the established color scheme for visual representation

Component Communication

• Use the action prop pattern for parent-child communication
• Emit events for user interactions
• Use provide/inject for deeply nested data sharing

Performance

• Use v-memo for expensive template computations
• Implement proper cleanup in lifecycle hooks
• Avoid unnecessary watchers - prefer computed properties
• Use shallowRef for large objects that don't need deep reactivity

Remember: This project prioritizes developer experience and clean architecture. Always prefer explicit types, clear component interfaces, and maintainable code patterns.