refactor(0): extract createPluginContext factory to eliminate trinity boilerplate

Introduces createPluginContext inside createPlugin — a factory that generates
the standard context/plugin/consumer triple for plugin composables from a
namespace, factory function, and optional setup/fallback config.

The setup callback receives (context, app, options) so adapter-wired plugins
can access their options without a manual plugin wrapper.

Migrates all 8 plugin composables to the factory:
- usePermissions, useStorage: simple (no setup/fallback)
- useLogger: setup (dev window export) + fallback (safe outside instances)
- useHydration: setup (root mixin) + fallback (SSR-safe)
- useBreakpoints: setup (resize listener via mixin)
- useLocale: fallback (safe outside instances)
- useFeatures: setup (adapter wiring)
- useTheme: setup (adapter + target)

Author: johnleider

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

@@ -9,9 +9,20 @@
  *
  * Wraps the provide function in app.runWithContext() to ensure proper execution context,
  * allowing plugins to safely provide dependency injection contexts at the application level.
+ *
+ * Also exports `createPluginContext` — a higher-level factory that generates the standard
+ * context/plugin/consumer triple for plugin composables, eliminating boilerplate.
  */
 
+// Foundational
+import { createContext, useContext } from '#v0/composables/createContext'
+import { createTrinity } from '#v0/composables/createTrinity'
+
+// Utilities
+import { instanceExists } from '#v0/utilities/instance'
+
 // Types
+import type { ContextTrinity } from '#v0/composables/createTrinity'
 import type { App } from 'vue'
 
 export interface PluginOptions {
@@ -70,3 +81,100 @@ export function createPlugin<Z extends Plugin = Plugin> (options: PluginOptions)
     },
   } as Z
 }
+
+export interface PluginContextConfig<O, E> {
+  /**
+   * Optional plugin setup callback, called once per Vue app after context provision.
+   * Use for adapter initialization, Vue app mixins, global side effects, etc.
+   * Receives the plugin options (minus namespace) so adapters and targets are accessible.
+   */
+  setup?: (context: E, app: App, options: O) => void
+  /**
+   * Optional fallback factory. When provided, the generated `useX` consumer uses the
+   * defensive pattern: returns the fallback when called outside a component instance or
+   * when the context is not found. Required for composables that may be consumed outside
+   * component setup (e.g. useLogger, useLocale, useHydration).
+   *
+   * Receives the requested namespace so error messages can include it.
+   */
+  fallback?: (namespace: string) => E
+}
+
+/**
+ * Creates the three standard functions for a plugin composable.
+ *
+ * @param defaultNamespace The default DI namespace string (e.g. `'v0:logger'`).
+ * @param factory Function that creates the composable context instance from options.
+ * @param config Optional setup callback and fallback factory.
+ * @returns A readonly tuple: `[createXContext, createXPlugin, useX]`.
+ *
+ * @example
+ * ```ts
+ * // Simple — no setup or fallback
+ * export const [createStorageContext, createStoragePlugin, useStorage] =
+ *   createPluginContext('v0:storage', options => createStorage(options))
+ *
+ * // With fallback — safe outside component instances
+ * export const [createLoggerContext, createLoggerPlugin, useLogger] =
+ *   createPluginContext('v0:logger', options => createLogger(options), {
+ *     fallback: ns => createFallbackLogger(ns),
+ *     setup: (context) => {
+ *       if (__DEV__ && IN_BROWSER) (window as any).__v0Logger__ = context
+ *     },
+ *   })
+ * ```
+ */
+export function createPluginContext<
+  O extends { namespace?: string } = Record<never, never>,
+  E = unknown,
+> (
+  defaultNamespace: string,
+  factory: (options: Omit<O, 'namespace'>) => E,
+  config?: PluginContextConfig<Omit<O, 'namespace'>, E>,
+): readonly [
+  <_E extends E = E>(_options?: O) => ContextTrinity<_E>,
+  (_options?: O) => Plugin,
+  <_E extends E = E>(namespace?: string) => _E,
+] {
+  function createXContext<_E extends E = E> (_options: O = {} as O): ContextTrinity<_E> {
+    const { namespace = defaultNamespace, ...options } = _options as O & { namespace?: string }
+    const [_use, _provide] = createContext<_E>(namespace)
+    const context = factory(options as Omit<O, 'namespace'>) as _E
+
+    function provide (_context: _E = context, app?: App): _E {
+      return _provide(_context, app)
+    }
+
+    return createTrinity<_E>(_use, provide, context)
+  }
+
+  function createXPlugin (_options: O = {} as O): Plugin {
+    const { namespace = defaultNamespace, ...options } = _options as O & { namespace?: string }
+    const [, provide, context] = createXContext({ ...options, namespace } as O)
+
+    return createPlugin({
+      namespace,
+      provide: app => {
+        provide(context, app)
+      },
+      setup: config?.setup
+        ? app => config.setup!(context, app, options as Omit<O, 'namespace'>)
+        : undefined,
+    })
+  }
+
+  function useX<_E extends E = E> (namespace = defaultNamespace): _E {
+    if (config?.fallback) {
+      const instance = config.fallback(namespace) as _E
+      if (!instanceExists()) return instance
+      try {
+        return useContext<_E>(namespace, instance)
+      } catch {
+        return instance
+      }
+    }
+    return useContext<_E>(namespace)
+  }
+
+  return [createXContext, createXPlugin, useX] as const
+}

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

@@ -21,9 +21,7 @@
 import { IN_BROWSER } from '#v0/constants/globals'
 
 // Foundational
-import { createContext, useContext } from '#v0/composables/createContext'
-import { createPlugin } from '#v0/composables/createPlugin'
-import { createTrinity } from '#v0/composables/createTrinity'
+import { createPluginContext } from '#v0/composables/createPlugin'
 
 // Composables
 import { useWindowEventListener } from '#v0/composables/useEventListener'
@@ -34,8 +32,7 @@ import { isNull, isNumber, mergeDeep } from '#v0/utilities'
 import { onScopeDispose, readonly, shallowRef, watch } from 'vue'
 
 // Types
-import type { ContextTrinity } from '#v0/composables/createTrinity'
-import type { App, ShallowRef } from 'vue'
+import type { ShallowRef } from 'vue'
 
 export type BreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
 
@@ -213,144 +210,33 @@ export function createBreakpoints<
   } as E
 }
 
-/**
- * Creates a new breakpoints context.
- *
- * @param options The options for the breakpoints context.
- * @template E The type of the breakpoints context.
- * @returns A new breakpoints context.
- *
- * @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
- *
- * @example
- * ```ts
- * import { createBreakpointsContext } from '@vuetify/v0'
- *
- * export const [useBreakpoints, provideBreakpoints, context] = createBreakpointsContext({
- *   namespace: 'v0:breakpoints',
- *   mobileBreakpoint: 'sm',
- * })
- * ```
- */
-export function createBreakpointsContext<
-  E extends BreakpointsContext = BreakpointsContext,
-> (_options: BreakpointsContextOptions = {}): ContextTrinity<E> {
-  const { namespace = 'v0:breakpoints', ...options } = _options
-  const [useBreakpointsContext, _provideBreakpointsContext] = createContext<E>(namespace)
-  const context = createBreakpoints<E>(options)
-
-  function provideBreakpointsContext (_context: E = context, app?: App): E {
-    return _provideBreakpointsContext(_context, app)
-  }
-
-  return createTrinity<E>(useBreakpointsContext, provideBreakpointsContext, context)
-}
-
-/**
- * Creates a new breakpoints plugin.
- *
- * @param options The options for the breakpoints plugin.
- * @template E The type of the breakpoints context.
- * @returns A new breakpoints plugin.
- *
- * @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
- *
- * @example
- * ```ts
- * import { createApp } from 'vue'
- * import { createBreakpointsPlugin } from '@vuetify/v0'
- * import App from './App.vue'
- *
- * const app = createApp(App)
- *
- * app.use(
- *   createBreakpointsPlugin({
- *     namespace: 'v0:breakpoints',
- *     mobileBreakpoint: 'md',
- *     breakpoints: {
- *       xs: 0,
- *       sm: 600,
- *       md: 840,
- *       lg: 1145,
- *       xl: 1545,
- *       xxl: 2138,
- *     },
- *   })
- * )
- *
- * app.mount('#app')
- * ```
- */
-export function createBreakpointsPlugin<
-  E extends BreakpointsContext = BreakpointsContext,
-> (_options: BreakpointsPluginOptions = {}) {
-  const { namespace = 'v0:breakpoints', ...options } = _options
-  const [, provideBreakpointsContext, context] = createBreakpointsContext<E>({ ...options, namespace })
-
-  return createPlugin({
-    namespace,
-    provide: (app: App) => {
-      provideBreakpointsContext(context, app)
+export const [createBreakpointsContext, createBreakpointsPlugin, useBreakpoints] =
+  createPluginContext<BreakpointsContextOptions, BreakpointsContext>(
+    'v0:breakpoints',
+    options => createBreakpoints(options),
+    {
+      setup: (context, app, _options) => {
+        app.mixin({
+          mounted () {
+            if (!isNull(this.$parent)) return
+
+            const hydration = useHydration()
+
+            function listener () {
+              context.update()
+            }
+
+            const unwatch = watch(hydration.isHydrated, hydrated => {
+              if (hydrated) listener()
+            }, { immediate: true })
+
+            const cleanup = useWindowEventListener('resize', listener, { passive: true })
+            onScopeDispose(() => {
+              cleanup()
+              unwatch()
+            }, true)
+          },
+        })
+      },
     },
-    setup: (app: App) => {
-      app.mixin({
-        mounted () {
-          if (!isNull(this.$parent)) return
-
-          const hydration = useHydration()
-
-          function listener () {
-            context.update()
-          }
-
-          const unwatch = watch(hydration.isHydrated, hydrated => {
-            if (hydrated) listener()
-          }, { immediate: true })
-
-          const cleanup = useWindowEventListener('resize', listener, { passive: true })
-          onScopeDispose(() => {
-            cleanup()
-            unwatch()
-          }, true)
-        },
-      })
-    },
-  })
-}
-
-/**
- * Returns the current breakpoints instance.
- *
- * @param namespace The namespace for the breakpoints context. Defaults to `v0:breakpoints`.
- * @returns The current breakpoints instance.
- *
- * @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
- *
- * @example
- * ```vue
- * <script setup lang="ts">
- *   import { useBreakpoints } from '@vuetify/v0'
- *
- *   // Destructure for template auto-unwrapping
- *   const { isMobile, mdAndUp } = useBreakpoints()
- *
- *   // In script, use .value
- *   if (isMobile.value) {
- *     console.log('Mobile detected')
- *   }
- * </script>
- *
- * <template>
- *   <div class="pa-4">
- *     <!-- Destructured refs auto-unwrap in templates -->
- *     <p v-if="isMobile">Mobile layout active</p>
- *     <p v-else-if="mdAndUp">Medium and up layout active</p>
- *   </div>
- * </template>
- * ```
- */
-export function useBreakpoints<
-  E extends BreakpointsContext = BreakpointsContext,
-> (namespace = 'v0:breakpoints'): E {
-  return useContext<E>(namespace)
-}
+  )