fix: security audit fixes across foundational composables

- createPlugin: stop persist watcher on app unmount
- createNested: cycle guard in getPath to prevent infinite loops
- createNumeric: reject NaN/Infinity in snap()
- createValidation: catch throwing rules in async validation
- useVirtualFocus: clean up highlight state on scope dispose
- createContext: dev warning for non-namespaced string keys
- createRegistry: dev warning when listener count exceeds 100
- useStorage: rename TTL envelope marker to prevent spoofing

Author: johnleider

packages/0/src/components/Locale/index.test.ts

@@ -0,0 +1,273 @@
+import { describe, expect, it } from 'vitest'
+
+// Composables
+import { createLocalePlugin, useLocale } from '#v0/composables/useLocale'
+
+// Utilities
+import { mount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+
+import { Locale } from './index'
+
+function createPlugin (options: Record<string, any> = {}) {
+  return createLocalePlugin({
+    default: 'en',
+    messages: {
+      en: {
+        greeting: 'Hello',
+        farewell: 'Goodbye, {name}!',
+        count: '{0} items',
+      },
+      fr: {
+        greeting: 'Bonjour',
+        farewell: 'Au revoir, {name} !',
+        count: '{0} éléments',
+      },
+      es: {
+        greeting: 'Hola',
+        farewell: '¡Adiós, {name}!',
+        count: '{0} elementos',
+      },
+    },
+    ...options,
+  })
+}
+
+describe('locale', () => {
+  it('should render a wrapper element with data-locale and lang attributes', () => {
+    const plugin = createPlugin()
+    const wrapper = mount(Locale, {
+      props: { locale: 'fr' },
+      global: { plugins: [plugin] },
+      slots: { default: () => h('span', 'content') },
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.attributes('data-locale')).toBe('fr')
+    expect(wrapper.attributes('lang')).toBe('fr')
+    expect(wrapper.text()).toBe('content')
+  })
+
+  it('should render custom tag via as prop', () => {
+    const plugin = createPlugin()
+    const wrapper = mount(Locale, {
+      props: { locale: 'fr', as: 'section' },
+      global: { plugins: [plugin] },
+      slots: { default: () => h('span', 'content') },
+    })
+
+    expect(wrapper.element.tagName).toBe('SECTION')
+  })
+
+  it('should pass attrs via slot in renderless mode', () => {
+    const plugin = createPlugin()
+    const wrapper = mount(Locale, {
+      props: { locale: 'fr', renderless: true },
+      global: { plugins: [plugin] },
+      slots: {
+        default: (props: any) => h('section', props.attrs, 'content'),
+      },
+    })
+
+    const section = wrapper.find('section')
+    expect(section.exists()).toBe(true)
+    expect(section.attributes('data-locale')).toBe('fr')
+    expect(section.attributes('lang')).toBe('fr')
+  })
+
+  it('should not render a wrapper element in renderless mode', () => {
+    const plugin = createPlugin()
+    const wrapper = mount(Locale, {
+      props: { locale: 'es', renderless: true },
+      global: { plugins: [plugin] },
+      slots: {
+        default: (props: any) => h('div', props.attrs, 'child'),
+      },
+    })
+
+    // The root element should be the slot content, not a wrapper
+    const div = wrapper.find('div')
+    expect(div.exists()).toBe(true)
+    expect(div.attributes('data-locale')).toBe('es')
+    expect(div.attributes('lang')).toBe('es')
+  })
+
+  it('should provide scoped locale context to children', () => {
+    const plugin = createPlugin()
+
+    const Child = defineComponent({
+      setup () {
+        const locale = useLocale()
+        return { locale }
+      },
+      render () {
+        return h('span', this.locale.t('greeting'))
+      },
+    })
+
+    const wrapper = mount(Locale, {
+      props: { locale: 'fr' },
+      global: { plugins: [plugin] },
+      slots: { default: () => h(Child) },
+    })
+
+    expect(wrapper.text()).toBe('Bonjour')
+  })
+
+  it('should translate with positional parameters', () => {
+    const plugin = createPlugin()
+
+    const Child = defineComponent({
+      setup () {
+        const locale = useLocale()
+        return { locale }
+      },
+      render () {
+        return h('span', this.locale.t('count', 5))
+      },
+    })
+
+    const wrapper = mount(Locale, {
+      props: { locale: 'fr' },
+      global: { plugins: [plugin] },
+      slots: { default: () => h(Child) },
+    })
+
+    expect(wrapper.text()).toBe('5 éléments')
+  })
+
+  it('should translate with named parameters', () => {
+    const plugin = createPlugin()
+
+    const Child = defineComponent({
+      setup () {
+        const locale = useLocale()
+        return { locale }
+      },
+      render () {
+        return h('span', this.locale.t('farewell', { name: 'World' }))
+      },
+    })
+
+    const wrapper = mount(Locale, {
+      props: { locale: 'es' },
+      global: { plugins: [plugin] },
+      slots: { default: () => h(Child) },
+    })
+
+    expect(wrapper.text()).toBe('¡Adiós, World!')
+  })
+
+  it('should scope selectedId to the provided locale', () => {
+    const plugin = createPlugin()
+    let capturedId: string | undefined
+
+    const Child = defineComponent({
+      setup () {
+        const locale = useLocale()
+        capturedId = locale.selectedId.value as string
+        return {}
+      },
+      render () {
+        return h('span')
+      },
+    })
+
+    mount(Locale, {
+      props: { locale: 'es' },
+      global: { plugins: [plugin] },
+      slots: { default: () => h(Child) },
+    })
+
+    expect(capturedId).toBe('es')
+  })
+
+  it('should support nested locale scoping', () => {
+    const plugin = createPlugin()
+
+    const Child = defineComponent({
+      setup () {
+        const locale = useLocale()
+        return { locale }
+      },
+      render () {
+        return h('span', this.locale.t('greeting'))
+      },
+    })
+
+    // Outer: fr, Inner: es
+    const wrapper = mount(Locale, {
+      props: { locale: 'fr' },
+      global: { plugins: [plugin] },
+      slots: {
+        default: () => h(Locale, { locale: 'es' }, {
+          default: () => h(Child),
+        }),
+      },
+    })
+
+    // Inner child should resolve to Spanish
+    expect(wrapper.text()).toBe('Hola')
+  })
+
+  it('should not affect parent locale context', () => {
+    const plugin = createPlugin()
+    let parentGreeting: string | undefined
+    let childGreeting: string | undefined
+
+    const ParentReader = defineComponent({
+      setup () {
+        const locale = useLocale()
+        parentGreeting = locale.t('greeting')
+        return {}
+      },
+      render () {
+        return h('span', parentGreeting)
+      },
+    })
+
+    const ChildReader = defineComponent({
+      setup () {
+        const locale = useLocale()
+        childGreeting = locale.t('greeting')
+        return {}
+      },
+      render () {
+        return h('span', childGreeting)
+      },
+    })
+
+    mount({
+      setup () {
+        return () => h('div', [
+          h(ParentReader),
+          h(Locale, { locale: 'fr' }, {
+            default: () => h(ChildReader),
+          }),
+        ])
+      },
+    }, {
+      global: { plugins: [plugin] },
+    })
+
+    expect(parentGreeting).toBe('Hello')
+    expect(childGreeting).toBe('Bonjour')
+  })
+
+  it('should update data-locale when locale prop changes', async () => {
+    const plugin = createPlugin()
+    const wrapper = mount(Locale, {
+      props: { locale: 'en' },
+      global: { plugins: [plugin] },
+      slots: { default: () => h('span', 'content') },
+    })
+
+    expect(wrapper.attributes('data-locale')).toBe('en')
+    expect(wrapper.attributes('lang')).toBe('en')
+
+    await wrapper.setProps({ locale: 'fr' })
+
+    expect(wrapper.attributes('data-locale')).toBe('fr')
+    expect(wrapper.attributes('lang')).toBe('fr')
+  })
+})

packages/0/src/composables/createContext/index.test.ts

@@ -132,6 +132,29 @@ describe('createContext', () => {
 
       expect(mockProvide).toHaveBeenCalledWith('component-level-test', testValue)
     })
+
+    it('should warn on non-namespaced string key in dev mode', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      createContext('no-namespace')
+
+      expect(warnSpy).toHaveBeenCalledTimes(1)
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('no-namespace'),
+      )
+
+      warnSpy.mockRestore()
+    })
+
+    it('should not warn on namespaced string key', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      createContext('v0:theme')
+
+      expect(warnSpy).not.toHaveBeenCalled()
+
+      warnSpy.mockRestore()
+    })
   })
 
   describe('dynamic key mode', () => {

packages/0/src/composables/createContext/index.ts

@@ -141,6 +141,13 @@ export function createContext<Z> (
 ) {
   // Static key mode: createContext('my-key') or createContext(Symbol())
   if (isString(keyOrOptions) || isSymbol(keyOrOptions)) {
+    // console.warn (not useLogger) — createContext is Layer 0, cannot import useLogger without circular dep
+    if (__DEV__ && isString(keyOrOptions) && !keyOrOptions.includes(':')) {
+      console.warn(
+        `[v0:context] String key "${keyOrOptions}" has no namespace separator. `
+        + `Use "namespace:key" format (e.g. "v0:theme") to prevent collisions.`,
+      )
+    }
     const _key = keyOrOptions as ContextKey<Z>
 
     function _provideContext (context: Z, app?: App) {

packages/0/src/composables/createNested/index.test.ts

@@ -249,6 +249,25 @@ describe('createNested', () => {
     })
   })
 
+  describe('circular reference protection', () => {
+    it('should not infinite loop in getPath when circular parent exists', () => {
+      const nested = createNested()
+
+      nested.register({ id: 'a', value: 'A' })
+      nested.register({ id: 'b', value: 'B', parentId: 'a' })
+
+      // Manually inject a circular reference (a→b→a)
+      // Cast past ReadonlyMap to simulate corrupted state
+      ;(nested.parents as Map<any, any>).set('a', 'b')
+
+      // Without protection this would hang forever
+      const path = nested.getPath('a')
+
+      // Should terminate and return a finite path
+      expect(path.length).toBeLessThanOrEqual(3)
+    })
+  })
+
   describe('open state management', () => {
     it('should open single node by ID', () => {
       const nested = createNested()

packages/0/src/composables/createNested/index.ts

@@ -296,8 +296,14 @@ export function createNested (_options: NestedOptions = {}): NestedContext {
   function getPath (id: ID): ID[] {
     const path: ID[] = []
     let currentId: ID | undefined = id
+    const visited = new Set<ID>()
 
     while (!isUndefined(currentId)) {
+      if (visited.has(currentId)) {
+        logger.warn(`Circular parent reference detected at "${currentId}".`)
+        break
+      }
+      visited.add(currentId)
       path.unshift(currentId)
       currentId = parents.get(currentId)
     }

packages/0/src/composables/createNumeric/index.test.ts

@@ -49,6 +49,13 @@ describe('createNumeric', () => {
       expect(n.snap(-10)).toBe(0)
       expect(n.snap(200)).toBe(100)
     })
+
+    it('should return min for NaN and Infinity', () => {
+      const n = setup({ min: 0, max: 100, step: 10 })
+      expect(n.snap(Number.NaN)).toBe(0)
+      expect(n.snap(Infinity)).toBe(0)
+      expect(n.snap(-Infinity)).toBe(0)
+    })
   })
 
   describe('fromValue', () => {

packages/0/src/composables/createNumeric/index.ts

@@ -66,6 +66,7 @@ export function createNumeric (options: NumericOptions = {}): NumericContext {
   )
 
   function snap (value: number): number {
+    if (!Number.isFinite(value)) return min
     if (step <= 0 || !Number.isFinite(min)) return clamp(value, min, max)
     const clamped = clamp(value, min, max)
     const steps = Math.round((clamped - min) / step)