@gluhar/core 4.2.0 → 6.0.0-next.0

package/README.md

@@ -20,39 +20,33 @@ My new Nuxt module for doing amazing things.
 <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
 <!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
-## Features
+Shared composables and utils, installed by `@gluhar/app`. Installs `@nuxtjs/device`.
 
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
+## `useResponsive()`
 
-## Quick Setup
+The one breakpoint composable for every gluhar project. It replaces the project-level `useMobile` copies.
 
-1. Add `my-module` dependency to your project
+**For behaviour only** — event handlers, GSAP/ScrollTrigger setup, measuring. Responsive layout is Tailwind variants in the template; never put a width flag in `v-if` / `:class`.
 
-```bash
-# Using pnpm
-pnpm add -D my-module
-
-# Using yarn
-yarn add --dev my-module
+```ts
+const { isMobileDevice, mounted, mobile, tablet, desktop, touch, up, down, between } =
+  useResponsive();
 
-# Using npm
-npm install --save-dev my-module
+const nav = up("nav"); // any --breakpoint-* the project declares
+onMounted(() => {
+  if (desktop.value) initParallax(); // already correct here
+});
 ```
 
-2. Add `my-module` to the `modules` section of `nuxt.config.ts`
-
-```js
-export default defineNuxtConfig({
-  modules: [
-    'my-module'
-  ]
-})
-```
+| | Source | On the server | Safe in markup |
+|---|---|---|---|
+| `isMobileDevice` | user agent | real value | yes — but it's a device guess, not a width |
+| `mobile` `tablet` `desktop` `wide` `touch` `tabletExact` `desktopExact` `up()` `down()` `between()` | viewport width | `false` | no |
 
-That's it! You can now use My Module in your Nuxt app ✨
+- Width flags stay `false` through the first hydration so server and client renders agree, then switch on in the composable's own `onMounted` — before any `onMounted` you register after calling it. Components created after hydration get live values immediately.
+- Breakpoints are the project's `--breakpoint-*` CSS values (read by `@gluhar/theme`), defaulting to `tablet` 768 / `desktop` 1200 / `wide` 2000.
+- `>=` comparisons, like CSS `min-width`: `tablet` and `tablet:` agree at every width, including exactly 768.
+- `mobile` = below `tablet`; `touch` = below `desktop` (a width, not touch capability).
 
 ## Development
 

package/dist/module.d.mts

@@ -4,4 +4,5 @@ interface GluharCoreOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<GluharCoreOptions, GluharCoreOptions, false>;
 
-export { type GluharCoreOptions, _default as default };
+export { _default as default };
+export type { GluharCoreOptions };

package/dist/module.d.ts

@@ -4,4 +4,5 @@ interface GluharCoreOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<GluharCoreOptions, GluharCoreOptions, false>;
 
-export { type GluharCoreOptions, _default as default };
+export { _default as default };
+export type { GluharCoreOptions };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluhar/core",
   "configKey": "gluharCore",
-  "version": "4.2.0",
+  "version": "6.0.0-next.0",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -7,9 +7,9 @@ const module = defineNuxtModule({
   },
   // Default configuration options of the Nuxt module
   defaults: {},
-  setup(options, nuxt) {
+  async setup() {
     const { resolve } = createResolver(import.meta.url);
-    installModule("@nuxtjs/device");
+    await installModule("@nuxtjs/device");
     addImportsDir(resolve("runtime/composables"));
     addImportsDir(resolve("runtime/utils"));
   }

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

@@ -1,9 +1,42 @@
+import { type ComputedRef } from "vue";
+import type { GluharBreakpoints } from "../types.js";
+/**
+ * Viewport state for BEHAVIOUR — event handlers, GSAP/ScrollTrigger setup,
+ * imperative measurement. Never for layout: responsive layout is Tailwind
+ * variants in the template (`tablet:`, `desktop:`), which the server renders
+ * for every width with no JS and no hydration risk.
+ *
+ * Two kinds of signal, kept apart on purpose:
+ *
+ * - `isMobileDevice` — user-agent based, identical on server and client. The
+ *   only one safe in `v-if` / `:class` / props. A device guess, not a width.
+ *
+ * - Width flags (`mobile`, `tablet`, `desktop`, `up("nav")`, …) — `false` on
+ *   the server and through the first hydration, so the server render and the
+ *   first client render agree by construction. They switch on in this
+ *   composable's own `onMounted`, which Vue runs before any `onMounted` you
+ *   register later in the same setup. Components created after hydration
+ *   (client-side navigation, SPA mode) get live values from the first render.
+ *
+ * Breakpoints come from the project's CSS (`--breakpoint-*` in the main
+ * stylesheet's `@theme`, read at build time by @gluhar/theme), so JS and CSS
+ * cannot drift. Comparisons are `>=`, matching CSS `min-width`: at exactly the
+ * breakpoint width, `tablet:` applies and `tablet` is true.
+ */
 export declare const useResponsive: () => {
-    mobile: import("vue").ComputedRef<boolean>;
-    tablet: import("vue").Ref<boolean, boolean>;
-    tabletExact: import("vue").ComputedRef<boolean>;
-    desktop: import("vue").Ref<boolean, boolean>;
-    desktopExact: import("vue").ComputedRef<boolean>;
-    wide: import("vue").Ref<boolean, boolean>;
-    touch: import("vue").ComputedRef<boolean>;
+    isMobileDevice: boolean;
+    /** True once hydrated — for guarding client-only behaviour explicitly. */
+    mounted: any;
+    breakpoints: GluharBreakpoints;
+    up: (name: string) => ComputedRef<any>;
+    down: (name: string) => ComputedRef<any>;
+    between: (from: string, to: string) => ComputedRef<any>;
+    mobile: ComputedRef<any>;
+    tablet: ComputedRef<any>;
+    tabletExact: ComputedRef<any>;
+    desktop: ComputedRef<any>;
+    desktopExact: ComputedRef<any>;
+    wide: ComputedRef<any>;
+    /** Below desktop width. A width, not touch capability. */
+    touch: ComputedRef<any>;
 };

package/dist/runtime/composables/useResponsive.js

@@ -1,26 +1,36 @@
-import { computed } from "#imports";
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
-import { useDevice } from "#imports";
+import { computed, onMounted, ref } from "vue";
+import { useBreakpoints } from "@vueuse/core";
+import { useAppConfig, useDevice, useNuxtApp } from "#imports";
+const DEFAULT_BREAKPOINTS = { tablet: 768, desktop: 1200, wide: 2e3 };
 export const useResponsive = () => {
-  const breakpoints = useBreakpoints({
-    ...breakpointsTailwind,
-    tablet: 768,
-    desktop: 1200,
-    wide: 2e3
-  });
-  const { isMobile } = useDevice();
-  const mobile = computed(
-    () => breakpoints.smaller("tablet").value || isMobile
-  );
-  const tablet = breakpoints.greater("tablet");
-  const tabletExact = computed(
-    () => breakpoints.isInBetween("tablet", "desktop")
-  );
-  const desktop = breakpoints.greater("desktop");
-  const desktopExact = computed(
-    () => breakpoints.isInBetween("desktop", "wide")
-  );
-  const touch = computed(() => !desktop.value);
-  const wide = breakpoints.greater("wide");
-  return { mobile, tablet, tabletExact, desktop, desktopExact, wide, touch };
+  const nuxtApp = useNuxtApp();
+  const breakpoints = {
+    ...DEFAULT_BREAKPOINTS,
+    ...useAppConfig().gluhar?.breakpoints
+  };
+  const viewport = useBreakpoints(breakpoints);
+  const { isMobile: isMobileDevice } = useDevice();
+  const mounted = ref(import.meta.client && !nuxtApp.isHydrating);
+  if (!mounted.value) onMounted(() => mounted.value = true);
+  const gate = (source) => computed(() => mounted.value && source.value);
+  const up = (name) => gate(viewport.greaterOrEqual(name));
+  const down = (name) => gate(viewport.smaller(name));
+  const between = (from, to) => gate(viewport.between(from, to));
+  return {
+    isMobileDevice,
+    /** True once hydrated — for guarding client-only behaviour explicitly. */
+    mounted,
+    breakpoints,
+    up,
+    down,
+    between,
+    mobile: down("tablet"),
+    tablet: up("tablet"),
+    tabletExact: between("tablet", "desktop"),
+    desktop: up("desktop"),
+    desktopExact: between("desktop", "wide"),
+    wide: up("wide"),
+    /** Below desktop width. A width, not touch capability. */
+    touch: down("desktop")
+  };
 };

package/dist/runtime/types/index.d.ts

@@ -1,3 +1,18 @@
 import { breakpointsTailwind } from "@vueuse/core";
 export type NonNegativeInteger<T extends number> = number extends T ? never : `${T}` extends `-${string}` | `${string}.${string}` ? never : T;
+/** Tailwind's default screens (sm…2xl), still present in v4. */
 export type Breakpoint = keyof typeof breakpointsTailwind;
+/** Breakpoint name -> min-width in px, as declared in the project's CSS. */
+export type GluharBreakpoints = Record<string, number>;
+declare module "nuxt/schema" {
+    interface AppConfigInput {
+        gluhar?: {
+            breakpoints?: GluharBreakpoints;
+        };
+    }
+    interface AppConfig {
+        gluhar?: {
+            breakpoints?: GluharBreakpoints;
+        };
+    }
+}

package/dist/runtime/utils/fs.d.ts

@@ -1,4 +1,11 @@
+/**
+ * Evaluates a project config file (e.g. `config/i18n.config.ts`) at build time.
+ *
+ * Relative paths resolve against `rootDir` — pass `nuxt.options.rootDir`.
+ * `process.cwd()` is only the fallback: it is wrong whenever Nuxt is started
+ * from another directory (`nuxi dev playground`, monorepos, `--cwd`).
+ */
 export declare const readModule: <T extends Record<string, any>>(path: string | undefined, options?: {
-    cwd?: boolean;
+    rootDir?: string;
     default?: boolean;
 }) => Promise<T>;

package/dist/runtime/utils/fs.js

@@ -1,13 +1,13 @@
 import { readFileSync } from "fs";
-import { join } from "path";
+import { isAbsolute, join } from "path";
 import { evalModule } from "mlly";
-export const readModule = async (path, options = { cwd: true }) => {
+export const readModule = async (path, options = {}) => {
   if (!path) throw new Error("[@gluhar/core] readModule | No path provided.");
-  const p = options?.cwd ? join(process.cwd(), path) : path;
+  const p = isAbsolute(path) ? path : join(options.rootDir ?? process.cwd(), path);
   const file = readFileSync(p)?.toString();
   if (!file)
     throw new Error("[@gluhar/core] readModule | File not found on path: " + p);
   const sanitizedFile = file.replaceAll(" as const", "");
   const module = await evalModule(sanitizedFile);
-  return options?.default ? module.default : module;
+  return options.default ? module.default : module;
 };

package/dist/types.d.mts

@@ -4,4 +4,4 @@ import type { default as Module } from './module.js'
 
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export { type GluharCoreOptions, default } from './module.js'
+export { default } from './module.js'

package/dist/types.d.ts

@@ -4,4 +4,4 @@ import type { default as Module } from './module'
 
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export { type GluharCoreOptions, default } from './module'
+export { default } from './module'

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@gluhar/core",
-  "version": "4.2.0",
+  "version": "6.0.0-next.0",
   "description": "Gluhar Core packages.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gluharco/gluhar.git",
+    "directory": "packages/core"
+  },
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     },
     "./utils/*": {
       "types": "./dist/runtime/utils/*.d.ts",
@@ -17,8 +21,8 @@
       "types": "./dist/runtime/types/index.d.ts"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
   "files": [
     "dist",
     "CHANGELOG.md"
@@ -26,6 +30,7 @@
   "scripts": {
     "gluhar": "npm run gluhar --prefix ../.. -- --cwd=$PWD",
     "build": "npm run gluhar build -- -t module",
+    "prepack": "npm run build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build && nuxt-module-build prepare && nuxi prepare playground",
@@ -34,23 +39,26 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.1",
+    "@nuxt/kit": "^4.5.0",
     "@nuxtjs/device": "^3.2.2",
-    "@vueuse/core": "^11.0.3",
+    "@vueuse/core": "^14.1.0",
     "mlly": "^1.7.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@nuxt/eslint-config": "^0.5.6",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxt/test-utils": "^3.14.1",
+    "@nuxt/eslint-config": "^1.9.0",
+    "@nuxt/module-builder": "^1.0.3",
+    "@nuxt/schema": "^4.5.0",
+    "@nuxt/test-utils": "^3.19.2",
     "@types/node": "^22.5.4",
     "changelogen": "^0.5.5",
     "copyfiles": "^2.4.1",
     "eslint": "^9.10.0",
-    "nuxt": "^3.13.1",
-    "vitest": "^2.0.5"
+    "nuxt": "^4.5.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.5.0"
   },
-  "gitHead": "10ebf6500c71e1beeceece4de90467b26aa67a21"
+  "gitHead": "8773cd99c43cbe6a7dc415e50af8b13a7b8d4daf"
 }