@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/components/common/PhoneNumInput.vue

@@ -0,0 +1,434 @@
+<template>
+  <!-- `theme` variant: two .osi-input controls joined into one box, styled
+       entirely by the theme's Inputs group (assets/css/osi-controls.css).
+       Used inside <OsiField> on login, register, checkout and the account
+       pages. The other variants below are unchanged. -->
+  <div
+    v-if="effectiveVariant === 'theme'"
+    class="osi-phone"
+    :class="{ 'is-open': isFocused }"
+  >
+    <DropdownSelect
+      v-model="selectedCode"
+      :options="countryOptions"
+      :searchable="true"
+      :local-search="true"
+      smallText
+      @search="onSearch"
+      @update:modelValue="onCountryChange"
+      @open="isFocused = true"
+      @close="isFocused = false"
+      :fullWidth="false"
+      class="osi-phone-dropdown"
+    >
+      <template #trigger="{ toggle }">
+        <button
+          type="button"
+          class="osi-phone-code"
+          :class="[inputClass, { 'is-invalid': !!error }]"
+          :aria-label="`Country code ${selectedCountry?.dial || ''}`"
+          :disabled="disabled"
+          @click="toggle"
+        >
+          <img
+            :key="selectedCountry?.code"
+            :src="getFlagUrl(selectedCountry?.code)"
+            :alt="selectedCountry?.name"
+          />
+          <span v-if="!ispopup">{{ selectedCountry?.dial }}</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+      </template>
+    </DropdownSelect>
+
+    <input
+      :id="inputId || undefined"
+      v-model="phoneNumber"
+      type="tel"
+      inputmode="numeric"
+      autocomplete="tel-national"
+      class="osi-phone-number"
+      :class="inputClass"
+      :placeholder="selectedCountry?.format"
+      :disabled="disabled"
+      :aria-invalid="!!error"
+      @input="onPhoneInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+  </div>
+
+  <div
+    v-else
+    class="w-full"
+    :class="[
+      effectiveVariant === 'underline' ? 'font-thoren relative' : 'font-poppins'
+    ]"
+  >
+    <label
+      v-if="effectiveVariant === 'underline'"
+      class="underline-label"
+    >{{ label }}</label>
+
+    <div
+      class="flex flex-row items-stretch w-full transition-all duration-300"
+      :class="[
+        effectiveVariant === 'register' ? 'rounded-none bg-transparent' : '',
+        effectiveVariant === 'register' && isFocused ? 'border-black' : '',
+        effectiveVariant === 'underline' ? 'border-b pt-[3px] border-black min-h-[45.98px]' : '',
+        effectiveVariant === 'bare' ? 'bg-transparent' : '',
+      ]"
+    >
+      <div
+        class="flex flex-col"
+        :class="effectiveVariant === 'bare' ? 'border-r border-gray-200 pr-3 justify-center py-2' : 'contents'"
+      >
+        <label
+          v-if="effectiveVariant === 'bare'"
+          class="block text-[11px] text-gray-400"
+        >{{ label }}</label>
+
+        <DropdownSelect
+          v-model="selectedCode"
+          :options="countryOptions"
+          :searchable="true"
+          :local-search="true"
+          smallText
+          @search="onSearch"
+          @update:modelValue="onCountryChange"
+          @open="isFocused = true"
+          @close="isFocused = false"
+          :fullWidth="false"
+          class="shrink min-w-[90px]"
+          :class="ispopup ? 'lg:min-w-[70px]':'lg:min-w-[140px]'"
+        >
+          <template #trigger="{ toggle }">
+            <button
+              type="button"
+              @click="toggle"
+              class="dropdown-trigger-btn rounded-l-none w-full text-left text-gray-900 focus:outline-none flex items-center justify-between transition-all duration-300"
+              :class="[
+                effectiveVariant === 'register'
+                  ? 'bg-transparent rounded-none pl-3 pr-2 border-y border-l border-r py-[9px] text-[1rem]'
+                  : effectiveVariant === 'underline'
+                  ? 'bg-transparent pl-0 pr-2 py-2'
+                  : effectiveVariant === 'bare'
+                  ? 'bg-transparent rounded-none border-0 p-0 text-sm'
+                  : 'bg-white min-h-[34px] rounded-l-md px-2 border py-1',
+                effectiveVariant === 'default'
+                  ? (error ? 'border-red-500' : 'border-gray-300')
+                  : '',
+                effectiveVariant === 'register'
+                  ? (error ? 'border-red-500' : 'border-gray-300')
+                  : '',
+              ]"
+              >
+              <div class="flex items-center gap-1.5">
+             <span class="text-base pointer-events-none select-none">
+    <img
+      :key="selectedCountry?.code"
+      :src="getFlagUrl(selectedCountry?.code)"
+      :alt="selectedCountry?.name"
+      class="w-5 h-5 object-contain"
+    />
+  </span>
+                <span
+                  class="font-medium pointer-events-none whitespace-nowrap"
+                  :class="[
+                    ispopup ? 'hidden':'block',
+                    effectiveVariant === 'bare' ? 'text-sm' : 'text-xs',
+                  ]"
+                >{{ selectedCountry?.dial }}</span>
+              </div>
+              <svg class="w-3.5 h-3.5 text-gray-900 shrink-0 ml-0.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.70711 16.1359C5.31659 16.5264 5.31659 17.1596 5.70711 17.5501L10.5993 22.4375C11.3805 23.2179 12.6463 23.2176 13.4271 22.4369L18.3174 17.5465C18.708 17.156 18.708 16.5228 18.3174 16.1323C17.9269 15.7418 17.2937 15.7418 16.9032 16.1323L12.7176 20.3179C12.3271 20.7085 11.6939 20.7085 11.3034 20.3179L7.12132 16.1359C6.7308 15.7454 6.09763 15.7454 5.70711 16.1359Z" fill="currentColor"></path>
+                <path d="M18.3174 7.88675C18.708 7.49623 18.708 6.86307 18.3174 6.47254L13.4252 1.58509C12.644 0.804698 11.3783 0.805008 10.5975 1.58579L5.70711 6.47615C5.31658 6.86667 5.31658 7.49984 5.70711 7.89036C6.09763 8.28089 6.7308 8.28089 7.12132 7.89036L11.307 3.70472C11.6975 3.31419 12.3307 3.31419 12.7212 3.70472L16.9032 7.88675C17.2937 8.27728 17.9269 8.27728 18.3174 7.88675Z" fill="currentColor"></path>
+              </svg>
+            </button>
+          </template>
+        </DropdownSelect>
+      </div>
+
+      <div class="flex flex-col min-w-0 w-full flex-2"
+      :class="effectiveVariant === 'bare' ? 'items-center justify-center':''">
+        <input
+          v-model="phoneNumber"
+          type="tel"
+          :placeholder="selectedCountry?.format"
+          class="w-full rounded-r-none text-input outline-none transition-all duration-300"
+          :class="[
+            effectiveVariant === 'register'
+              ? 'bg-transparent border-y border-r border-l-0 rounded-none text-[1rem] text-gray-900 pr-3 py-[9px] px-2'
+              : effectiveVariant === 'underline'
+              ? 'bg-transparent border-none py-2 px-0 text-sm text-black'
+              : effectiveVariant === 'bare'
+              ? 'bg-transparent border-0 rounded-none p-0 pl-3 text-[16px] text-primaryColor placeholder:text-[#6b7280]'
+              : 'bg-input min-h-[34px] border rounded-r-md rounded-l-none py-1 px-2',
+            effectiveVariant === 'default'
+              ? (error ? 'border-red-500' : 'border-gray-300 focus:border-gray-400')
+              : '',
+            effectiveVariant === 'register'
+              ? (error ? 'border-red-500' : 'border-gray-300')
+              : '',
+          ]"
+          @input="onPhoneInput"
+          @focus="isFocused = true"
+          @blur="isFocused = false"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import DropdownSelect from './DropdownSelect.vue'
+import { useUserStore } from '../../stores/userStore'
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  error: { type: [Boolean, String], default: false },
+  ispopup:{type:Boolean,default:false},
+  isRegister:{type:Boolean,default:false},
+  variant: { type: String, default: '' }, // '', 'register', 'underline', 'bare', 'theme'
+  label: { type: String, default: 'Phone number' },
+  // theme variant only
+  inputClass: { type: [String, Array, Object], default: 'osi-input' },
+  inputId: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'update', 'clear-error'])
+
+const userStore = useUserStore()
+
+const effectiveVariant = computed(() => {
+  if (props.variant) return props.variant
+  return props.isRegister ? 'register' : 'default'
+})
+
+const countries = [
+  { name: "Afghanistan", dial: "+93", flag: "🇦🇫", code: "AF", format: "XX XXX XXXX", len: 9 },
+  { name: "Albania", dial: "+355", flag: "🇦🇱", code: "AL", format: "XX XXX XXXX", len: 9 },
+  { name: "Algeria", dial: "+213", flag: "🇩🇿", code: "DZ", format: "XXX XXX XXXX", len: 10 },
+  { name: "Argentina", dial: "+54", flag: "🇦🇷", code: "AR", format: "XXX XXX XXXX", len: 10 },
+  { name: "Armenia", dial: "+374", flag: "🇦🇲", code: "AM", format: "XX XXX XXX", len: 8 },
+  { name: "Australia", dial: "+61", flag: "🇦🇺", code: "AU", format: "XXX XXX XXX", len: 9 },
+  { name: "Austria", dial: "+43", flag: "🇦🇹", code: "AT", format: "XXX XXXXXXX", len: 10 },
+  { name: "Azerbaijan", dial: "+994", flag: "🇦🇿", code: "AZ", format: "XX XXX XXXX", len: 9 },
+  { name: "Bahrain", dial: "+973", flag: "🇧🇭", code: "BH", format: "XXXX XXXX", len: 8 },
+  { name: "Bangladesh", dial: "+880", flag: "🇧🇩", code: "BD", format: "XXXX XXXXXX", len: 10 },
+  { name: "Belgium", dial: "+32", flag: "🇧🇪", code: "BE", format: "XXX XX XX XX", len: 9 },
+  { name: "Brazil", dial: "+55", flag: "🇧🇷", code: "BR", format: "XX XXXXX XXXX", len: 11 },
+  { name: "Canada", dial: "+1", flag: "🇨🇦", code: "CA", format: "XXX XXX XXXX", len: 10 },
+  { name: "Chile", dial: "+56", flag: "🇨🇱", code: "CL", format: "X XXXX XXXX", len: 9 },
+  { name: "China", dial: "+86", flag: "🇨🇳", code: "CN", format: "XXX XXXX XXXX", len: 11 },
+  { name: "Colombia", dial: "+57", flag: "🇨🇴", code: "CO", format: "XXX XXX XXXX", len: 10 },
+  { name: "Croatia", dial: "+385", flag: "🇭🇷", code: "HR", format: "XX XXX XXXX", len: 9 },
+  { name: "Cyprus", dial: "+357", flag: "🇨🇾", code: "CY", format: "XXXX XXXX", len: 8 },
+  { name: "Czech Republic", dial: "+420", flag: "🇨🇿", code: "CZ", format: "XXX XXX XXX", len: 9 },
+  { name: "Denmark", dial: "+45", flag: "🇩🇰", code: "DK", format: "XXXX XXXX", len: 8 },
+  { name: "Egypt", dial: "+20", flag: "🇪🇬", code: "EG", format: "XXX XXX XXXX", len: 10 },
+  { name: "Ethiopia", dial: "+251", flag: "🇪🇹", code: "ET", format: "XX XXX XXXX", len: 9 },
+  { name: "Finland", dial: "+358", flag: "🇫🇮", code: "FI", format: "XXX XXXXXXX", len: 10 },
+  { name: "France", dial: "+33", flag: "🇫🇷", code: "FR", format: "X XX XX XX XX", len: 9 },
+  { name: "Georgia", dial: "+995", flag: "🇬🇪", code: "GE", format: "XXX XXX XXX", len: 9 },
+  { name: "Germany", dial: "+49", flag: "🇩🇪", code: "DE", format: "XXX XXXXXXXX", len: 11 },
+  { name: "Ghana", dial: "+233", flag: "🇬🇭", code: "GH", format: "XXX XXX XXXX", len: 10 },
+  { name: "Greece", dial: "+30", flag: "🇬🇷", code: "GR", format: "XXX XXX XXXX", len: 10 },
+  { name: "Hungary", dial: "+36", flag: "🇭🇺", code: "HU", format: "XX XXX XXXX", len: 9 },
+  { name: "India", dial: "+91", flag: "🇮🇳", code: "IN", format: "XXXXX XXXXX", len: 10 },
+  { name: "Indonesia", dial: "+62", flag: "🇮🇩", code: "ID", format: "XXX XXXX XXXX", len: 11 },
+  { name: "Iran", dial: "+98", flag: "🇮🇷", code: "IR", format: "XXX XXX XXXX", len: 10 },
+  { name: "Iraq", dial: "+964", flag: "🇮🇶", code: "IQ", format: "XXX XXX XXXX", len: 10 },
+  { name: "Ireland", dial: "+353", flag: "🇮🇪", code: "IE", format: "XX XXX XXXX", len: 9 },
+  { name: "Israel", dial: "+972", flag: "🇮🇱", code: "IL", format: "XX XXX XXXX", len: 9 },
+  { name: "Italy", dial: "+39", flag: "🇮🇹", code: "IT", format: "XXX XXX XXXX", len: 10 },
+  { name: "Japan", dial: "+81", flag: "🇯🇵", code: "JP", format: "XXX XXXX XXXX", len: 11 },
+  { name: "Jordan", dial: "+962", flag: "🇯🇴", code: "JO", format: "X XXXX XXXX", len: 9 },
+  { name: "Kazakhstan", dial: "+7", flag: "🇰🇿", code: "KZ", format: "XXX XXX XXXX", len: 10 },
+  { name: "Kenya", dial: "+254", flag: "🇰🇪", code: "KE", format: "XXX XXX XXX", len: 9 },
+  { name: "Kuwait", dial: "+965", flag: "🇰🇼", code: "KW", format: "XXXX XXXX", len: 8 },
+  { name: "Lebanon", dial: "+961", flag: "🇱🇧", code: "LB", format: "XX XXX XXX", len: 8 },
+  { name: "Libya", dial: "+218", flag: "🇱🇾", code: "LY", format: "XX XXX XXXX", len: 9 },
+  { name: "Malaysia", dial: "+60", flag: "🇲🇾", code: "MY", format: "XX XXXX XXXX", len: 10 },
+  { name: "Mexico", dial: "+52", flag: "🇲🇽", code: "MX", format: "XXX XXX XXXX", len: 10 },
+  { name: "Morocco", dial: "+212", flag: "🇲🇦", code: "MA", format: "XXX XXX XXX", len: 9 },
+  { name: "Netherlands", dial: "+31", flag: "🇳🇱", code: "NL", format: "X XX XX XX XX", len: 9 },
+  { name: "New Zealand", dial: "+64", flag: "🇳🇿", code: "NZ", format: "XX XXX XXXX", len: 9 },
+  { name: "Nigeria", dial: "+234", flag: "🇳🇬", code: "NG", format: "XXX XXX XXXX", len: 10 },
+  { name: "Norway", dial: "+47", flag: "🇳🇴", code: "NO", format: "XXX XX XXX", len: 8 },
+  { name: "Oman", dial: "+968", flag: "🇴🇲", code: "OM", format: "XXXX XXXX", len: 8 },
+  { name: "Pakistan", dial: "+92", flag: "🇵🇰", code: "PK", format: "XXX XXX XXXX", len: 10 },
+  { name: "Palestine", dial: "+970", flag: "🇵🇸", code: "PS", format: "XXX XXX XXXX", len: 10 },
+  { name: "Philippines", dial: "+63", flag: "🇵🇭", code: "PH", format: "XXX XXX XXXX", len: 10 },
+  { name: "Poland", dial: "+48", flag: "🇵🇱", code: "PL", format: "XXX XXX XXX", len: 9 },
+  { name: "Portugal", dial: "+351", flag: "🇵🇹", code: "PT", format: "XXX XXX XXX", len: 9 },
+  { name: "Qatar", dial: "+974", flag: "🇶🇦", code: "QA", format: "XXXX XXXX", len: 8 },
+  { name: "Romania", dial: "+40", flag: "🇷🇴", code: "RO", format: "XXX XXX XXX", len: 9 },
+  { name: "Russia", dial: "+7", flag: "🇷🇺", code: "RU", format: "XXX XXX XXXX", len: 10 },
+  { name: "Saudi Arabia", dial: "+966", flag: "🇸🇦", code: "SA", format: "XX XXX XXXX", len: 9 },
+  { name: "Senegal", dial: "+221", flag: "🇸🇳", code: "SN", format: "XX XXX XXXX", len: 9 },
+  { name: "Serbia", dial: "+381", flag: "🇷🇸", code: "RS", format: "XX XXX XXXX", len: 9 },
+  { name: "Singapore", dial: "+65", flag: "🇸🇬", code: "SG", format: "XXXX XXXX", len: 8 },
+  { name: "South Africa", dial: "+27", flag: "🇿🇦", code: "ZA", format: "XX XXX XXXX", len: 9 },
+  { name: "South Korea", dial: "+82", flag: "🇰🇷", code: "KR", format: "XX XXXX XXXX", len: 10 },
+  { name: "Spain", dial: "+34", flag: "🇪🇸", code: "ES", format: "XXX XXX XXX", len: 9 },
+  { name: "Sudan", dial: "+249", flag: "🇸🇩", code: "SD", format: "XX XXX XXXX", len: 9 },
+  { name: "Sweden", dial: "+46", flag: "🇸🇪", code: "SE", format: "XXX XXX XXXX", len: 10 },
+  { name: "Switzerland", dial: "+41", flag: "🇨🇭", code: "CH", format: "XX XXX XXXX", len: 9 },
+  { name: "Syria", dial: "+963", flag: "🇸🇾", code: "SY", format: "XXX XXX XXX", len: 9 },
+  { name: "Taiwan", dial: "+886", flag: "🇹🇼", code: "TW", format: "XXX XXX XXXX", len: 10 },
+  { name: "Thailand", dial: "+66", flag: "🇹🇭", code: "TH", format: "XX XXX XXXX", len: 9 },
+  { name: "Tunisia", dial: "+216", flag: "🇹🇳", code: "TN", format: "XX XXX XXX", len: 8 },
+  { name: "Turkey", dial: "+90", flag: "🇹🇷", code: "TR", format: "XXX XXX XXXX", len: 10 },
+  { name: "UAE", dial: "+971", flag: "🇦🇪", code: "AE", format: "XX XXX XXXX", len: 9 },
+  { name: "Uganda", dial: "+256", flag: "🇺🇬", code: "UG", format: "XXX XXX XXX", len: 9 },
+  { name: "Ukraine", dial: "+380", flag: "🇺🇦", code: "UA", format: "XX XXX XXXX", len: 9 },
+  { name: "United Kingdom", dial: "+44", flag: "🇬🇧", code: "GB", format: "XXXX XXXXXX", len: 10 },
+  { name: "United States", dial: "+1", flag: "🇺🇸", code: "US", format: "XXX XXX XXXX", len: 10 },
+  { name: "Venezuela", dial: "+58", flag: "🇻🇪", code: "VE", format: "XXX XXX XXXX", len: 10 },
+  { name: "Vietnam", dial: "+84", flag: "🇻🇳", code: "VN", format: "XXX XXX XXXX", len: 10 },
+  { name: "Yemen", dial: "+967", flag: "🇾🇪", code: "YE", format: "XXX XXX XXX", len: 9 },
+]
+
+const selectedCode = ref('US')
+const phoneNumber = ref('')
+const isFocused = ref(false)
+const searchQuery = ref('')
+
+let countryAutoSet = false
+
+const syncCountry = () => {
+  const code = userStore.clientIpInfo?.country
+  if (!code) return
+  const upper = code.toUpperCase()
+  if (!countryAutoSet && selectedCode.value === 'US') {
+    const exists = countries.some(c => c.code === upper)
+    if (exists) {
+      selectedCode.value = upper
+      countryAutoSet = true
+    }
+  }
+}
+
+// Safely apply the country after the component finishes hydrating
+onMounted(() => {
+  syncCountry()
+})
+
+watch(() => userStore.clientIpInfo?.country, syncCountry)
+
+function onSearch(query) {
+  searchQuery.value = query
+}
+
+const countryOptions = computed(() => {
+  const q = searchQuery.value.toLowerCase()
+
+  return countries
+    .filter(c => c.name.toLowerCase().includes(q) || c.dial.includes(q))
+    .map(c => ({
+      value: c.code,
+      label: `${c.name} (${c.dial})`,
+      image: getFlagUrl(c.code),
+      flag: getFlagUrl(c.code),
+      dial: c.dial,
+      name: c.name,
+    }))
+})
+
+const selectedCountry = computed(() =>
+  countries.find(c => c.code === selectedCode.value)
+)
+
+const status = computed(() => {
+  if (!phoneNumber.value) return 'idle'
+  return phoneNumber.value.length === selectedCountry.value.len ? 'success' : 'error'
+})
+
+const hintText = computed(() => {
+  if (!phoneNumber.value) return ''
+  if (status.value === 'success') return 'Valid number'
+  const diff = selectedCountry.value.len - phoneNumber.value.length
+  return diff > 0
+    ? `${diff} digit${diff > 1 ? 's' : ''} short`
+    : `${-diff} digit${-diff > 1 ? 's' : ''} too many`
+})
+
+function onCountryChange() {
+  countryAutoSet = true
+  phoneNumber.value = ''
+}
+
+function onPhoneInput() {
+  phoneNumber.value = phoneNumber.value.replace(/\D/g, '')
+  emit('clear-error')
+}
+
+function emitUpdate() {
+  const e164 = phoneNumber.value ? `${selectedCountry.value.dial}${phoneNumber.value}` : ''
+  const isValid = status.value === 'success'
+  emit('update:modelValue', e164)
+  emit('update', { isValid, e164 })
+}
+
+watch([phoneNumber, selectedCode], emitUpdate)
+
+watch(() => props.modelValue, (newVal) => {
+  if (!newVal) {
+    phoneNumber.value = ''
+    return
+  }
+  const currentE164 = `${selectedCountry.value?.dial || ''}${phoneNumber.value}`
+  if (currentE164 === newVal) return
+
+  // Prefer keeping the currently selected country if it still fits the new value
+  if (selectedCountry.value && newVal.startsWith(selectedCountry.value.dial)) {
+    phoneNumber.value = newVal.slice(selectedCountry.value.dial.length)
+    return
+  }
+
+  const matchedCountry = countries.slice().sort((a,b) => b.dial.length - a.dial.length).find(c => newVal.startsWith(c.dial))
+  if (matchedCountry) {
+    selectedCode.value = matchedCountry.code
+    phoneNumber.value = newVal.slice(matchedCountry.dial.length)
+  } else {
+    phoneNumber.value = newVal.replace(/\D/g, '')
+  }
+}, { immediate: true })
+
+const getFlagUrl = (code) => {
+  if (!code) return '';
+  return `https://flagcdn.com/w40/${code.toLowerCase()}.png`;
+};
+</script>
+
+<style scoped>
+.osi-phone-dropdown {
+  display: flex;
+  flex: none;
+}
+.underline-label {
+  position: absolute;
+  top: -22px;
+  left: 0;
+  font-size: 0.85rem;
+  color: #000;
+  pointer-events: none;
+}
+.dropdown-trigger-btn {
+  -webkit-appearance: none;
+  appearance: none;
+  outline: none !important;
+  box-shadow: none !important;
+  -webkit-tap-highlight-color: transparent;
+}
+.dropdown-trigger-btn:focus,
+.dropdown-trigger-btn:focus-visible,
+.dropdown-trigger-btn:active,
+.dropdown-trigger-btn:hover {
+  outline: none !important;
+  box-shadow: none !important;
+}
+</style>

package/app/composables/UseBodyScrollLock.js

@@ -0,0 +1,122 @@
+/**
+ * Ref-counted page scroll lock.
+ *
+ * `document.body.style.overflow` was being set directly in 27 places across 8
+ * files — some also setting documentElement, some not, and all of them writing
+ * "auto" on release rather than restoring the original value. Two overlapping
+ * owners (cart drawer open over a product lightbox) meant whichever closed
+ * first unlocked the page underneath the other.
+ *
+ * A count fixes that: the page unlocks when the last owner releases, not the
+ * first. The original inline values are captured on the 0 -> 1 transition and
+ * restored on 1 -> 0, so a theme that sets its own overflow keeps it.
+ *
+ * Module-level state is correct here even though this app is multi-tenant: it
+ * is browser DOM state, and every function no-ops on the server.
+ */
+let lockCount = 0;
+let previous = null;
+
+/**
+ * True while the page is locked (and for a frame after, while its scroll
+ * position is put back). useLayoutShell ignores scroll events meanwhile: the
+ * lock and the restore are not the visitor scrolling, and reading them used
+ * to hide the header (a jump counted as "scrolling down") or reset its state.
+ * Client-only in practice — never changes during SSR.
+ */
+export const scrollLocked = ref(false);
+
+function applyLock() {
+  if (!import.meta.client) return;
+
+  const body = document.body;
+  const root = document.documentElement;
+
+  previous = {
+    bodyOverflow: body.style.overflow,
+    rootOverflow: root.style.overflow,
+    bodyPaddingRight: body.style.paddingRight,
+    y: window.scrollY || root.scrollTop || 0,
+  };
+  scrollLocked.value = true;
+
+  // The scrollbar disappears with overflow: hidden — pad its width back so
+  // the page (and a sticky header) doesn't shift sideways.
+  const gutter = window.innerWidth - root.clientWidth;
+  if (gutter > 0) body.style.paddingRight = `${gutter}px`;
+
+  body.style.overflow = "hidden";
+  root.style.overflow = "hidden";
+}
+
+function releaseLock() {
+  if (!import.meta.client) return;
+
+  const y = previous?.y ?? null;
+  document.body.style.overflow = previous?.bodyOverflow ?? "";
+  document.documentElement.style.overflow = previous?.rootOverflow ?? "";
+  document.body.style.paddingRight = previous?.bodyPaddingRight ?? "";
+  previous = null;
+
+  // Some browsers (iOS Safari, and any page with scroll-behavior: smooth)
+  // move the page when the lock comes off — closing a drawer used to scroll
+  // to the top. Put it back where it was, instantly.
+  if (y !== null && Math.abs((window.scrollY || 0) - y) > 1) {
+    window.scrollTo({ top: y, left: 0, behavior: "instant" });
+  }
+  requestAnimationFrame(() => {
+    scrollLocked.value = false;
+  });
+}
+
+/**
+ * @param {Ref<boolean>|(() => boolean)} [source]
+ *   Optional. When given, the lock follows it automatically — this covers most
+ *   call sites (`watch(showFilters)`, `watch(lightboxOpen)`, `watch(isSheetOpen)`)
+ *   and removes the release-on-unmount bug those watchers all had.
+ */
+export function useBodyScrollLock(source) {
+  // Per-caller, so one component unmounting can only release its own locks.
+  let held = 0;
+
+  function lock() {
+    if (!import.meta.client) return;
+    held += 1;
+    lockCount += 1;
+    if (lockCount === 1) applyLock();
+  }
+
+  function unlock() {
+    if (!import.meta.client || held === 0) return;
+    held -= 1;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0) releaseLock();
+  }
+
+  function set(locked) {
+    if (locked) {
+      if (held === 0) lock();
+    } else {
+      while (held > 0) unlock();
+    }
+  }
+
+  /** Release everything this caller holds, however many times it locked. */
+  function releaseAll() {
+    while (held > 0) unlock();
+  }
+
+  if (source) {
+    watch(
+      typeof source === "function" ? source : () => unref(source),
+      (locked) => set(!!locked),
+      { immediate: true }
+    );
+  }
+
+  // A drawer closed by navigation never runs its own close handler, which is
+  // how the old code left the page permanently unscrollable.
+  if (getCurrentInstance()) onScopeDispose(releaseAll);
+
+  return { lock, unlock, set, releaseAll };
+}