@nyuccl/smile 0.2.0-beta.4 → 0.2.0-beta.41

package/dist/runtime/components/ui/tabs/TabsList.d.vue.ts

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
 }>> & Readonly<{}>, {
-    asChild: boolean;
     loop: boolean;
+    asChild: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {}) => any) | undefined;

package/dist/runtime/components/ui/tabs/TabsList.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { TabsList } from "reka-ui";
 const props = defineProps({

package/dist/runtime/components/ui/tabs/TabsList.vue.d.ts

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
 }>> & Readonly<{}>, {
-    asChild: boolean;
     loop: boolean;
+    asChild: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {}) => any) | undefined;

package/dist/runtime/components/ui/tabs/TabsTrigger.d.vue.ts

@@ -6,7 +6,7 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     disabled: {
@@ -27,7 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     disabled: {

package/dist/runtime/components/ui/tabs/TabsTrigger.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { TabsTrigger, useForwardProps } from "reka-ui";
 const props = defineProps({

package/dist/runtime/components/ui/tabs/TabsTrigger.vue.d.ts

@@ -6,7 +6,7 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     disabled: {
@@ -27,7 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     disabled: {

package/dist/runtime/components/ui/tags-input/TagsInput.d.vue.ts

@@ -78,8 +78,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
     invalid: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
     addTag: (...args: any[]) => void;
     removeTag: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -156,13 +156,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInvalid?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onAddTag?: ((...args: any[]) => any) | undefined;
     onRemoveTag?: ((...args: any[]) => any) | undefined;
 }>, {
-    required: boolean;
     disabled: boolean;
+    required: boolean;
     asChild: boolean;
     addOnPaste: boolean;
     addOnTab: boolean;

package/dist/runtime/components/ui/tags-input/TagsInput.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { TagsInputRoot, useForwardPropsEmits } from "reka-ui";
 const props = defineProps({

package/dist/runtime/components/ui/tags-input/TagsInput.vue.d.ts

@@ -78,8 +78,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
     invalid: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
     addTag: (...args: any[]) => void;
     removeTag: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -156,13 +156,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInvalid?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onAddTag?: ((...args: any[]) => any) | undefined;
     onRemoveTag?: ((...args: any[]) => any) | undefined;
 }>, {
-    required: boolean;
     disabled: boolean;
+    required: boolean;
     asChild: boolean;
     addOnPaste: boolean;
     addOnTab: boolean;

package/dist/runtime/components/ui/tags-input/TagsInputInput.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { TagsInputInput, useForwardProps } from "reka-ui";
 const props = defineProps({

package/dist/runtime/components/ui/tags-input/TagsInputItem.d.vue.ts

@@ -6,7 +6,7 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: (StringConstructor | ObjectConstructor)[];
         required: true;
     };
     disabled: {
@@ -27,7 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: (StringConstructor | ObjectConstructor)[];
         required: true;
     };
     disabled: {

package/dist/runtime/components/ui/tags-input/TagsInputItem.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { TagsInputItem, useForwardProps } from "reka-ui";
 const props = defineProps({

package/dist/runtime/components/ui/tags-input/TagsInputItem.vue.d.ts

@@ -6,7 +6,7 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: (StringConstructor | ObjectConstructor)[];
         required: true;
     };
     disabled: {
@@ -27,7 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: (StringConstructor | ObjectConstructor)[];
         required: true;
     };
     disabled: {

package/dist/runtime/components/ui/tags-input/TagsInputItemDelete.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { X } from "lucide-vue-next";
 import { TagsInputItemDelete, useForwardProps } from "reka-ui";

package/dist/runtime/components/ui/tags-input/TagsInputItemText.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { TagsInputItemText, useForwardProps } from "reka-ui";
 const props = defineProps({

package/dist/runtime/components/ui/textarea/Textarea.d.vue.ts

@@ -6,11 +6,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         required: false;
     };
     defaultValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: false;
     };
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: false;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -21,11 +21,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         required: false;
     };
     defaultValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: false;
     };
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: false;
     };
 }>> & Readonly<{

package/dist/runtime/components/ui/textarea/Textarea.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { useVModel } from "@vueuse/core";
 const props = defineProps({
   class: { type: null, required: false },

package/dist/runtime/components/ui/textarea/Textarea.vue.d.ts

@@ -6,11 +6,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         required: false;
     };
     defaultValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: false;
     };
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: false;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -21,11 +21,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         required: false;
     };
     defaultValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: false;
     };
     modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: false;
     };
 }>> & Readonly<{

package/dist/runtime/components/ui/toggle/Toggle.d.vue.ts

@@ -97,12 +97,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    variant: any;
-    required: boolean;
     size: any;
     disabled: boolean;
+    required: boolean;
     defaultValue: boolean;
     asChild: boolean;
+    variant: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {

package/dist/runtime/components/ui/toggle/Toggle.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { Toggle, useForwardPropsEmits } from "reka-ui";
 import { toggleVariants } from ".";

package/dist/runtime/components/ui/toggle/Toggle.vue.d.ts

@@ -97,12 +97,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    variant: any;
-    required: boolean;
     size: any;
     disabled: boolean;
+    required: boolean;
     defaultValue: boolean;
     asChild: boolean;
+    variant: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {

package/dist/runtime/components/ui/toggle/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Toggle } from "./Toggle.vue.js";
 export const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/runtime/components/ui/toggle-group/ToggleGroup.d.vue.ts

@@ -131,10 +131,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    required: boolean;
+    loop: boolean;
     disabled: boolean;
+    required: boolean;
     asChild: boolean;
-    loop: boolean;
     rovingFocus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

package/dist/runtime/components/ui/toggle-group/ToggleGroup.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui";
 import { provide } from "vue";

package/dist/runtime/components/ui/toggle-group/ToggleGroup.vue.d.ts

@@ -131,10 +131,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    required: boolean;
+    loop: boolean;
     disabled: boolean;
+    required: boolean;
     asChild: boolean;
-    loop: boolean;
     rovingFocus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

package/dist/runtime/components/ui/toggle-group/ToggleGroupItem.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { ToggleGroupItem, useForwardProps } from "reka-ui";
 import { inject } from "vue";

package/dist/runtime/components/ui/tooltip/TooltipContent.d.vue.ts

@@ -47,7 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
     collisionPadding: {
-        type: (ObjectConstructor | NumberConstructor)[];
+        type: (NumberConstructor | ObjectConstructor)[];
         required: false;
     };
     arrowPadding: {
@@ -120,7 +120,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
     collisionPadding: {
-        type: (ObjectConstructor | NumberConstructor)[];
+        type: (NumberConstructor | ObjectConstructor)[];
         required: false;
     };
     arrowPadding: {

package/dist/runtime/components/ui/tooltip/TooltipContent.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { cn } from "../../../lib/utils";
 import { reactiveOmit } from "@vueuse/core";
 import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui";
 defineOptions({

package/dist/runtime/components/ui/tooltip/TooltipContent.vue.d.ts

@@ -47,7 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
     collisionPadding: {
-        type: (ObjectConstructor | NumberConstructor)[];
+        type: (NumberConstructor | ObjectConstructor)[];
         required: false;
     };
     arrowPadding: {
@@ -120,7 +120,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
     };
     collisionPadding: {
-        type: (ObjectConstructor | NumberConstructor)[];
+        type: (NumberConstructor | ObjectConstructor)[];
         required: false;
     };
     arrowPadding: {

package/dist/runtime/composables/useAPI.d.ts

@@ -20,8 +20,8 @@ export default function useAPI(): SmileAPI;
  * @property {object} private - Private data from store
  * @property {object} all_data - Combined private and public data
  * @property {object} all_config - Combined bro, dev, github and main configs
- * @property {Object} urls - Global URL configurations
- * @property {Object} log - Logging methods interface
+ * @property {object} urls - Global URL configurations
+ * @property {object} log - Logging methods interface
  */
 export class SmileAPI {
     /**

package/dist/runtime/composables/useAPI.js

@@ -20,11 +20,11 @@ import { useRoute, useRouter, useRuntimeConfig, useNuxtApp } from '#imports'
 import useSmileStore from '../stores/smilestore.js'
 import useLog from '../stores/log.js'
 import useTimeline from './useTimeline.js'
-import * as _seedrandom from 'seedrandom'
+import seedrandom from 'seedrandom'
 import { v4 as uuidv4 } from 'uuid'
-import * as _sha256 from 'crypto-js/sha256'
-import * as _Base64url from 'crypto-js/enc-base64'
-import * as _stringify from 'json-stable-stringify'
+import sha256 from 'crypto-js/sha256'
+import Base64url from 'crypto-js/enc-base64'
+import stringify from 'json-stable-stringify'
 import {
   randomInt,
   shuffle,
@@ -33,11 +33,6 @@ import {
   fakerDistributions,
 } from '../utils/randomization.js'
 
-const seedrandom = _seedrandom.default || _seedrandom
-const sha256 = _sha256.default || _sha256
-const Base64url = _Base64url.default || _Base64url
-const stringify = _stringify.default || _stringify
-
 /**
  * SmileAPI class provides core functionality for SMILE experiments
  * @class
@@ -55,8 +50,8 @@ const stringify = _stringify.default || _stringify
  * @property {object} private - Private data from store
  * @property {object} all_data - Combined private and public data
  * @property {object} all_config - Combined bro, dev, github and main configs
- * @property {Object} urls - Global URL configurations
- * @property {Object} log - Logging methods interface
+ * @property {object} urls - Global URL configurations
+ * @property {object} log - Logging methods interface
  */
 export class SmileAPI {
   /**

package/dist/runtime/composables/useViewAPI.d.ts

@@ -34,6 +34,7 @@ declare class ViewAPI extends SmileAPI {
     _stateMachine: import("vue").Ref<null, null>;
     _gvars: import("vue").Ref<{}, {}>;
     componentRegistry: Map<any, any>;
+    _appContext: import("vue").AppContext | undefined;
     onKeyDown: typeof onKeyDown;
     onKeyPressed: typeof onKeyPressed;
     onKeyUp: typeof onKeyUp;

package/dist/runtime/composables/useViewAPI.js

@@ -5,7 +5,7 @@
  * - All methods and properties from the core API
  * - All methods and properties from the stepper
  */
-import { ref, reactive, computed, watch } from 'vue'
+import { ref, reactive, computed, watch, getCurrentInstance } from 'vue'
 import { SmileAPI } from './useAPI.js'
 import useSmileStore from '../stores/smilestore.js'
 import { useStepper } from './useStepper.js'
@@ -57,9 +57,13 @@ class ViewAPI extends SmileAPI {
     this._stateMachine = ref(null)
     this._gvars = ref({})
 
-    // Component registry
+    // Component registry (deprecated - now stored on the Stepper's _componentRegistry)
+    // Kept for backwards compatibility but no longer populated
     this.componentRegistry = new Map()
 
+    // Capture the Vue app context for resolving globally registered components
+    this._appContext = getCurrentInstance()?.appContext
+
     // Watch for stepper changes and update internal state
     watch(
       this._stepper,
@@ -672,10 +676,22 @@ class ViewAPI extends SmileAPI {
 
     return this._dataAlongPath.value.map((item) => {
       if (item?.type?.__vueComponent) {
+        const name = item.type.componentName
+        // Try stepper's component registry first (captures user-imported components)
+        const stepperRegistry = this._stepper.value?._componentRegistry
+        let resolved = stepperRegistry?.get(name)
+        // Fallback to globally registered components (Nuxt auto-imports)
+        if (!resolved && this._appContext) {
+          const globalResolved = this._appContext.components?.[name]
+            || this._appContext.app?.component?.(name)
+          if (globalResolved) {
+            resolved = globalResolved
+          }
+        }
         return {
           ...item,
-          type: this.componentRegistry.get(item.type.componentName) || {
-            template: `<div>Component ${item.type.componentName} not found</div>`,
+          type: resolved || {
+            template: `<div>Component ${name} not found</div>`,
           },
         }
       }

package/dist/runtime/composables/useWindowSizer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Monitors the viewport size and updates `browserEphemeral.tooSmall`.
+ *
+ * @param {{ useDeviceContainer?: boolean }} options
+ *   - useDeviceContainer: when true, checks against the responsive device
+ *     container dimensions (for the development layout). When false or
+ *     omitted, checks against the browser window dimensions.
+ * @returns {{ showAggressiveOverlay: import('vue').ComputedRef<boolean> }}
+ */
+export default function useWindowSizer({ useDeviceContainer }?: {
+    useDeviceContainer?: boolean;
+}): {
+    showAggressiveOverlay: import("vue").ComputedRef<boolean>;
+};

package/dist/runtime/composables/useWindowSizer.js

@@ -0,0 +1,48 @@
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import useAPI from './useAPI.js'
+
+/**
+ * Monitors the viewport size and updates `browserEphemeral.tooSmall`.
+ *
+ * @param {{ useDeviceContainer?: boolean }} options
+ *   - useDeviceContainer: when true, checks against the responsive device
+ *     container dimensions (for the development layout). When false or
+ *     omitted, checks against the browser window dimensions.
+ * @returns {{ showAggressiveOverlay: import('vue').ComputedRef<boolean> }}
+ */
+export default function useWindowSizer({ useDeviceContainer = false } = {}) {
+  const api = useAPI()
+
+  const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 0)
+  const windowHeight = ref(typeof window !== 'undefined' ? window.innerHeight : 0)
+
+  function updateWindowDimensions() {
+    windowWidth.value = window.innerWidth
+    windowHeight.value = window.innerHeight
+  }
+
+  onMounted(() => {
+    updateWindowDimensions()
+    window.addEventListener('resize', updateWindowDimensions)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateWindowDimensions)
+  })
+
+  const effectiveWidth = computed(() => {
+    return useDeviceContainer ? api.store.dev.deviceWidth : windowWidth.value
+  })
+
+  const effectiveHeight = computed(() => {
+    return useDeviceContainer ? api.store.dev.deviceHeight : windowHeight.value
+  })
+
+  const showAggressiveOverlay = computed(() => {
+    const val = api.isBrowserTooSmall(effectiveWidth.value, effectiveHeight.value)
+    api.store.browserEphemeral.tooSmall = val
+    return val
+  })
+
+  return { showAggressiveOverlay }
+}